在微信打开的h5页面，如果想要跳转到app指定页面时，一般会提示在浏览器打开。
“在浏览器打开"遮罩，可以加上渐变动画使得不那么生硬。
动画实现注意点：
如果是用透明度opacity 和 transition 来过度遮罩出现，那么在transition之前元素就应该存在，然后再把元素的opacity值从0过度到1
具体实现如下：
<!DOCTYPE html >
<html style="font-size: 13.333vw">
<head>
<title>hello vuejs</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.button{
width: 2.30rem;
height: 0.80rem;
border-radius: 0.40rem;
background-color: lightcoral;
font-size: 0.24rem;
color: #fff;
}
.wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
background-color: rgba(0, 0, 0, 0.4);
transition: opacity 0.3s;
opacity: 0;
}
.wrapper.active {
opacity: 1;
}
.content {
width: 100%;
padding-top: 0.35rem;
position: relative;
}
.content .arrow {
width: 2.1rem;
height: 1.6rem;
position: absolute;
right: 0.31rem;
background: url('./arrow.png') center no-repeat;
background-size: contain;
transition: opacity 0.3s;
opacity: 0;
}
.content .arrow.active {
opacity: 1;
}
.content .text {
position: absolute;
top: calc(0.35rem + 2.34rem);
right: calc(0.31rem + 2.28rem);
font-size: 0.28rem;
color: #fff;
line-height: 0.34rem;
}
</style>
</head>
<body>
<div id="app">
<button class="button" @click="show">打开app</button>
<div :class="['wrapper', {'active': wrapperActive}]" @click="fade" v-show="isguide">
<div class="content">
<div :class="['arrow', {'active' : arrowActive}]"></div>
<div class="text">
<p>请点击右上角</p>
<p>选择在浏览器中打开</p>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
isguide: false,
wrapperActive: false,
arrowActive: false
}
},
watch: {
isguide: {
handler (value) {
if (value) {
setTimeout(() => { this.wrapperActive = true }, 200)
setTimeout(() => { this.arrowActive = true }, 600)
}
}
}
},
methods: {
show() {
this.isguide = true
},
fade () {
this.isguide = false
this.arrowActive = false
this.wrapperActive = false
}
}
})
</script>
</body>
</html>
效果：
image
附 图：
arrow.png
网友评论