今天在作一個彈窗,我想給彈窗作一個緩入動畫css
一開始我是用v-show來實現,結果發現transition不支持display:none;vue
以後我又用opacity,transition有一個點擊的問題,以後利用css屬性pointer-event:none讓點擊事件穿透遮罩ios
<template>
<div class="guess">
<div class="head">
<div><img src="../../static/svg/pingce/icon_bfcs.svg" alt=" " class="img"> </div>
<div class="tag">保費測算</div>
</div>
<div class="main">
<div class="title">30歲 男性 有社保</div>
<div class="result">
<div class="sum">
39919.00<span class="yuan">元</span>
</div>
<div class="sex">
<div class="boy" @click="changeSex('boy')" :class="{'current-sex':sex=='boy'}">男</div>
<div class="girl" @click="changeSex('girl')" :class="{'current-sex':sex=='girl'}">女</div>
</div>
</div>
<div class="more" id="more">
<div class="point">查看更多結果</div>
<div class="arrow point" :class="{ 'arrowTransform': !show, 'arrowTransformReturn': show}">
<div style="transform:scale(0.5)"> <span class="iconfont icon_down"></span></div>
</div>
<div id="mask" :class="{'fade-in': show}">
<div>
<div class="standard">計算標準：50萬保障，保終身，30年交費</div>
<div class="shuoming">(保費說明：本頁面保費試算不含特定疾病和身故保障)</div>
</div>
<div>
<div class="standard">計算標準：普通用戶</div>
<div class="shuoming">(保費說明：本頁面保費試算不含特定疾病和身故保障)</div>
</div>
<div>
<div class="standard">計算標準：20年交費</div>
<div class="shuoming">(保費說明：本頁面保費試算不含特定疾病和身故保障)</div>
</div>
<div>
<div class="standard">計算標準：200萬保額</div>
<div class="shuoming">(保費說明：本頁面保費試算不含特定疾病和身故保障)</div>
</div>
<div>
<div class="standard">計算標準：10萬保額,保終生,20年交費</div>
<div class="shuoming">(保費說明：本頁面保費試算不含特定疾病和身故保障)</div>
</div>
<!--普通類 insType == 1 重疾|| insType == 6 防癌-->
<div class="table">
<div class='thead '>
<div class="th1 center">年齡</div>
<div class="th1 center">首年保費（男）</div>
<div class="th1 center">首年保費（女）</div>
</div>
<div class="tbody">
<div class="item" v-for="(item,index) in 3" :key="index">
<div class="th1 center">年齡</div>
<div class="th1 center">首年保費（男）</div>
<div class="th1 center">首年保費（女）</div>
</div>
</div>
</div>
<!--二類 意外 insType == 4-->
<div class="table" v-if="true">
<div class='thead '>
<div class="th2 center">年齡</div>
<div class="th2 center">
<div>首年保費</div>
<div>(10萬保額)</div>
</div>
<div class="th2 center">
<div>首年保費</div>
<div>(20萬保額)</div>
</div>
<div class="th2 center">
<div>首年保費</div>
<div>(50萬保額)</div>
</div>
<div class="th2 center">
<div>首年保費</div>
<div>(100萬保額)</div>
</div>
</div>
<div class="tbody">
<div class="item" v-for="(item,index) in 3" :key="index">
<div class="th1 center">年齡</div>
<div class="th1 center">首年保費（男）</div>
<div class="th1 center">首年保費（女）</div>
<div class="th1 center">年齡</div>
<div class="th1 center">年齡</div>
</div>
</div>
</div>
<!--三類 壽險 insType == 2-->
<div class="table" v-if="true">
<div v-if="true">
<div class='thead '>
<div class="th4 center">保障</div>
<div class="th3 center" style="height:36px;">
<div>100萬保額，保至60歲</div>
</div>
<div class="th3 center" style="height:36px;">
<div>50萬保額，保20年</div>
</div>
</div>
<div class='thead '>
<div class="th2 center">年齡</div>
<div class="th2 around">
<div>首年保費</div>
<div>(男)</div>
</div>
<div class="th2 around">
<div>首年保費</div>
<div>(女)</div>
</div>
<div class="th2 around">
<div>首年保費</div>
<div>(男)</div>
</div>
<div class="th2 around">
<div>首年保費</div>
<div>(女)</div>
</div>
</div>
<div class="tbody">
<div class="item" v-for="(item,index) in 3" :key="index">
<div class="th1 center">年齡</div>
<div class="th1 center">首年保費（男）</div>
<div class="th1 center">首年保費（女）</div>
<div class="th1 center">年齡</div>
<div class="th1 center">年齡</div>
</div>
</div>
</div>
<div v-if="true">
<div class="thead">
<div class="th5 center" style="height:36px;">保障</div>
<div class="th3 center" style="height:36px;">50萬保額，保1年，交1年</div>
</div>
<div class="thead">
<div class="th1 center" style="height:36px;">年齡</div>
<div class="th3 center" style="height:36px;">首年保費（男）</div>
<div class="th3 center" style="height:36px;">首年保費（女）</div>
</div>
<div class="tbody">
<div v-for="(item,index) in 3" :key="index" class="item">
<div class="th1 center" style="height:36px;">年齡</div>
<div class="th3 center" style="height:36px;">首年保費（男）</div>
<div class="th3 center" style="height:36px;">首年保費（女）</div>
</div>
</div>
</div>
</div>
<!--醫療險-->
<div class="table" v-if="true">
<div v-if="true">
<div class='thead '>
<div class="th4 center">保障</div>
<div class="th3 center" style="height:36px;">
<div>有社保</div>
</div>
<div class="th3 center" style="height:36px;">
<div>無社保</div>
</div>
</div>
<div class='thead '>
<div class="th2 center">年齡</div>
<div class="th2 around">
<div>首年保費</div>
<div>(男)</div>
</div>
<div class="th2 around">
<div>首年保費</div>
<div>(女)</div>
</div>
<div class="th2 around">
<div>首年保費</div>
<div>(男)</div>
</div>
<div class="th2 around">
<div>首年保費</div>
<div>(女)</div>
</div>
</div>
<div class="tbody">
<div class="item" v-for="(item,index) in 3" :key="index">
<div class="th1 center">年齡</div>
<div class="th1 center">首年保費（男）</div>
<div class="th1 center">首年保費（女）</div>
<div class="th1 center">年齡</div>
<div class="th1 center">年齡</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="go">
<el-button>當即投保</el-button>
</div>
<div id="consult">
<el-button disabled>預定顧問</el-button>
</div>
</div>
</div>
</template>
<script>
import {
mapState
} from 'vuex'
import {
Message
} from 'element-ui'
import axios from 'axios'
export default {
data() {
return {
sex: 'boy',
show: false
}
},
props: {
},
created() {
},
mounted() {
window.addEventListener("click", this.more, true)
},
methods: {
more(e) {
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
if (!Element.prototype.closest)
Element.prototype.closest = function (s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement;
} while (el !== null);
return null;
};
let more = e.target.closest("#more");
let mask = e.target.closest("#mask")
if (more && !mask) {
// this.show = true
this.show = !this.show
} else if (more && mask) {
this.show = true
// console.log(1);
} else {
this.show = false
}
},
changeSex(e) {
this.sex = e
}
},
destroyed() {
window.removeEventListener("click", this.more, true)
}
}
</script>
<style lang="scss" scoped>
.point {
cursor: pointer;
}
.arrowTransform {
transition: 0.5s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn {
transition: 0.5s;
transform-origin: center;
transform: rotateZ(0deg);
}
.center {
justify-content: center;
align-items: center;
}
.around {
justify-content: space-around;
align-items: center;
padding: 6px 0;
}
.th1 {
box-sizing: border-box;
border-bottom: 1px solid #DEE7FF;
flex: 1;
height: 36px;
border-right: 1px solid #E4ECFF;
display: flex;
&:last-of-type {
border-right: none;
}
}
.th2 {
box-sizing: border-box;
border-bottom: 1px solid #DEE7FF;
flex: 1;
height: 65px;
border-right: 1px solid #E4ECFF;
display: flex;
flex-direction: column;
font-size: 12px;
&:last-of-type {
border-right: none;
}
}
.th3 {
box-sizing: border-box;
border-bottom: 1px solid #DEE7FF;
flex: 2;
height: 65px;
border-right: 1px solid #E4ECFF;
display: flex;
font-size: 12px;
&:last-of-type {
border-right: none;
}
}
.th4 {
box-sizing: border-box;
border-bottom: 1px solid #DEE7FF;
// flex: 1;
width: 89.4px;
height: 36px;
border-right: 1px solid #E4ECFF;
display: flex;
font-size: 12px;
&:last-of-type {
border-right: none;
}
}
.th5 {
box-sizing: border-box;
border-bottom: 1px solid #DEE7FF;
// flex: 1;
width: 89.8px;
height: 36px;
border-right: 1px solid #E4ECFF;
display: flex;
}
.table {
color: #333333;
box-sizing: border-box;
border: 1px solid #DEE7FF;
border-bottom: none;
.thead {
background: #2873ff;
color: #fff;
// border-bottom: 2rpx solid #fff;
display: flex;
}
.tbody {
box-sizing: border-box;
.item {
display: flex;
}
}
}
.guess {
box-sizing: border-box;
background: #FFFFFF;
padding: 0 20px;
margin-bottom: 20px;
.head {
box-sizing: border-box;
border-bottom: 1px solid #EDEDED;
height: 60px;
display: flex;
align-items: center;
.img {
width: 18px;
vertical-align: -3px;
}
.tag {
margin-left: 16px;
font-size: 14px;
}
}
.main {
height: 280px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-bottom: 10px;
.title {
font-size: 14px;
color: #8E8E8E;
}
.result {
height: 42px;
display: flex;
justify-content: space-between;
align-items: center;
.sum {
color: #E02020;
font-size: 30px;
.yuan {
font-size: 18px;
margin-left: 2px;
}
}
.sex {
display: flex;
.boy,
.girl {
// background: #2D7BFF;
border: 1px solid #D8D8D8;
background: #fff;
border-radius: 2px;
border-radius: 2px;
padding: 2px 13px;
font-size: 14px;
color: #8E8E8E;
cursor: pointer;
&.current-sex {
background: #2D7BFF;
color: #fff;
}
}
.boy {
margin-right: 5px;
}
}
}
.more {
width: 100px;
height: 26px;
border: 1px solid #EDEDED;
font-size: 12px;
color: #8E8E8E;
display: flex;
align-items: center;
justify-content: center;
position: relative;
// box-shadow: 0 0 11px 0;
.arrow {
.icon_down {
font-size: 12px;
color: #8E8E8E;
}
}
#mask {
width: 480px;
// height: 500px;
padding: 20px 16px;
background: #fff;
position: absolute;
left: -289px;
top: 23px;
box-shadow: 0 0 11px 0;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
transition: opacity 1s linear;
&.fade-in {
opacity: 1;
pointer-events: auto;
}
.standard {
margin-bottom: 7px;
}
.shuoming {
font-size: 12px;
color: #8E8E8E;
margin-bottom: 20px;
}
}
}
.go,
.consult {
height: 50px;
background: #F5A825;
font-size: 20px;
color: #FFFFFF;
border-radius: 2px;
text-align: center;
line-height: 50px;
}
// .consult {
// margin-bottom: 10px;
// }
}
/deep/ .el-button {
// display: flex;
// flex: 1;
width: 100%;
justify-content: center;
background: #F5A825;
font-size: 20px;
color: #FFFFFF;
border-radius: 2px;
text-align: center;
height: 50px;
border: none;
box-sizing: border-box;
border-radius: 2px;
}
#go {
/deep/ .el-button {
background: #2D7BFF;
}
}
}
@media all and (max-width: 766px) {
.guess {
margin-top: 0.8rem !important
}
}
</style>