过渡的动画遮罩层

1<template>
2  <div class="modal-open">
3    <!-- 动画遮罩层 -->
4    <div class="plan-cover cover_company_166" :class="animateFlagTopDown == true ? ['zIndex'] : ''">
5      <div class="plan-cover-top" :class="animateFlagTopDown == true ? ['coverFadeOutUp'] : ''">
6        <img class="plan-cover-logo" src="@/assets/images/planBook/company.png" alt="" />
7        <div class="plan-cover-slogan">
8          <img src="@/assets/images/planBook/slogan_taikang.png" alt="" />
9        </div>
10      </div>
11      <div class="plan-cover-center">
12        <div :class="animateFlag == true ? 'colorNone' : ''" class="line"></div>
13        <div class="btn" :class="animateFlag == true ? ['animated', 'coverZoomOut'] : ''" @click="openDetail">亲启</div>
14      </div>
15      <div class="plan-cover-bottom" :class="animateFlagTopDown == true ? ['coverFadeOutDown'] : ''">
16        <span class="customer-info"
17          >敬呈
18          <span v-show="!showNameflag">亲爱的</span>
19          <span v-show="showNameflag">{{ insuredName || "" }}</span>
20          客户</span
21        >
22        <div class="customer-count">{{ count }}</div>
23      </div>
24    </div>
25  </div>
26</template>
27<script>
28export default {
29  name: "BenefitTransform",
30  data() {
31    return {
32      animateFlag: false,
33      animateFlagTopDown: false, //  上下动画待“亲启”结束(0.5s)后开启
34      showNameflag: false, //  是否展示客户名称
35      count: 5,
36      animatebBegin: null,
37      insuredName: "",
38    };
39  },
40  created() {
41    // 进入页面两秒钟后获得客户姓名
42    // && 5s定时器结束后进入详情页面
43    this.animatebBegin = setInterval(() => {
44      // console.log(this.count);
45      this.count--;
46      if (this.count == 3) {
47        this.showNameflag = true;
48        this.insuredName = utils.getStore("insuredName");
49      }
50      if (this.count == 0) {
51        this.animateFlag = true;
52        setTimeout(() => {
53          this.animateFlagTopDown = true;
54          clearInterval(this.animatebBegin);
55        }, 500);
56        setTimeout(() => {
57          this.$emit("isAnimateEnd", true);
58        }, 800);
59      }
60    }, 1000);
61    //
62  },
63
64  methods: {
65    // 点击亲启触发动画
66    openDetail() {
67      this.animateFlag = true;
68      clearInterval(this.animatebBegin);
69      setTimeout(() => {
70        this.animateFlagTopDown = true;
71      }, 500);
72      setTimeout(() => {
73        this.$emit("isAnimateEnd", true);
74      }, 800);
75    },
76  },
77  // 页面离开后销毁定时器
78  destroyed() {
79    clearInterval(this.animatebBegin);
80  },
81};
82</script>
83
84<style lang="less" scoped>
85.zIndex {
86  z-index: -9999;
87}
88.modal-open {
89  position: fixed;
90  width: 100%;
91  height: 100%;
92}
93.plan-cover {
94  height: 100%;
95  z-index: 9999;
96}
97
98.plan-cover-top {
99  height: 55%;
100  padding-top: 15%;
101  background-color: #c7000b;
102}
103
104.plan-cover-top .plan-cover-logo {
105  display: block;
106  width: 128px;
107  height: 128px;
108  margin: 0 auto;
109}
110
111.plan-cover-top .plan-cover-slogan {
112  -webkit-box-flex: 1;
113  margin: 4% auto 0;
114  width: 153px;
115  img {
116    width: 100%;
117  }
118}
119
120.plan-cover-bottom {
121  display: block;
122  -webkit-box-flex: 1;
123  width: 100%;
124  height: 40%;
125  background-color: #c7000b;
126}
127
128.plan-cover-bottom .customer-info {
129  position: absolute;
130  left: 50%;
131  top: 70%;
132  vertical-align: middle;
133  color: #fff;
134  -webkit-transform: translate(-50%, -50%);
135  font-size: 18px;
136}
137
138.plan-cover-bottom .customer-count {
139  display: block;
140  position: absolute;
141  width: 100%;
142  left: 0;
143  bottom: 13%;
144  height: 30px;
145  line-height: 30px;
146  font-size: 16px;
147  color: #fff;
148  font-weight: 700;
149  text-align: center;
150}
151
152.plan-cover-center .line {
153  width: 100%;
154  height: 1px;
155  background: #fff;
156  position: absolute;
157  left: 0;
158  top: 55%;
159  -webkit-transform: translateY(-50%);
160}
161.plan-cover-center .colorNone {
162  background: transparent;
163}
164
165.plan-cover-center .btn {
166  width: 88px;
167  height: 88px;
168  background: #fff;
169  border-radius: 50%;
170  color: #c7000b;
171  position: absolute;
172  text-align: center;
173  line-height: 88px;
174  font-size: 18px;
175  font-weight: 700;
176  left: 50%;
177  top: 55%;
178  margin-left: -44px;
179  margin-top: -44px;
180}
181.coverZoomOut {
182  -webkit-animation-duration: 0.4s;
183  -webkit-animation-name: coverZoomOut;
184  -webkit-animation-fill-mode: forwards;
185}
186
187.coverFadeOutDown,
188.coverFadeOutUp {
189  -webkit-animation-duration: 0.6s;
190  -webkit-animation-fill-mode: forwards;
191}
192
193.coverFadeOutUp {
194  -webkit-animation-name: coverFadeOutUp;
195}
196
197.coverFadeOutDown {
198  -webkit-animation-name: coverFadeOutDown;
199}
200
201@-webkit-keyframes coverZoomOut {
202  0% {
203    opacity: 1;
204  }
205
206  100% {
207    opacity: 0;
208    -webkit-transform: scale3d(4, 4, 4);
209    transform: scale3d(4, 4, 4);
210  }
211}
212
213@-webkit-keyframes coverFadeOutUp {
214  0% {
215    opacity: 1;
216  }
217
218  100% {
219    opacity: 0;
220    -webkit-transform: translate3d(0, -100%, 0);
221    transform: translate3d(0, -100%, 0);
222  }
223}
224
225@-webkit-keyframes coverFadeOutDown {
226  0% {
227    opacity: 1;
228  }
229
230  100% {
231    opacity: 0;
232    -webkit-transform: translate3d(0, 100%, 0);
233    transform: translate3d(0, 100%, 0);
234  }
235}
236.coverFadeOutDown,
237.coverFadeOutUp {
238  -webkit-animation-duration: 0.6s;
239  -webkit-animation-fill-mode: forwards;
240}
241
242.coverFadeOutUp {
243  -webkit-animation-name: coverFadeOutUp;
244}
245
246.coverFadeOutDown {
247  -webkit-animation-name: coverFadeOutDown;
248}
249</style>
250