<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue过渡与循环切换和放大缩小</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .box { margin-left: 150px; } .box01{ 200px; height: 200px; background-color: red; } .box02{ 200px; height: 200px; background-color: blue; } .div_transition_text{ overflow: hidden; background-color: pink; height: 260px; 500px; text-align: center; } #animat{ position:relative; animation:mymove 3s infinite; animation-direction:alternate;/*轮流反向播放动画。*/ animation-timing-function: ease-in-out; /*动画的速度曲线*/ -webkit-animation:mymove 3s infinite; /*Safari and Chrome*/ -webkit-animation-direction:alternate;/*轮流反向播放动画。*/ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/ } @keyframes mymove{ 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{ transform: scale(1.2); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.2); } } @-webkit-keyframes mymove{ 0%{ transform: scale(1); } 25%{ transform: scale(1.2); } 50%{ transform: scale(1); } 75%{ transform: scale(1.2); } } .bounce-enter-active { animation: bounce-in 1s; } .bounce-leave-active { animation: bounce-in 1s reverse; } @keyframes bounce-in { 0% { transform: scale(1.5); } 50% { transform: scale(1); } 100% { transform: scale(1.5); } } .ready_btn { height: 35px; 100px; background: blue; text-align: center; line-height: 35px; margin-left: 200px; margin-top: 50px; } .fade-enter-active, .fade-leave-active { transition: opacity 1s } .fade-enter, .fade-leave-to { opacity: 0 } </style> </head> <body> <div id = "databinding"> <div class="div_transition_text"> <transition name = "fade"> <div v-show = "show1" :style = "styleobj">111111111111111111111111</div> </transition> <transition name = "fade"> <div v-show = "show2" :style = "styleobj">222222222222222222222222</div> </transition> <transition name = "fade"> <div v-show = "show3" :style = "styleobj">333333333333333333333333</div> </transition> <transition name = "fade"> <div v-show = "show4" :style = "styleobj">444444444444444444444444</div> </transition> </div> <div v-show='showDoctor' class='box box01'></div> <div v-show='!showDoctor' class='box box02'></div> <transition name="bounce"> <div v-show="show" class="ready_btn" id="animat">我准备好了!</div> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { myInterval: '', showDoctor: true, show: true, show1: false, show2: false, show3: false, show4: false, styleobj :{ 'fontSize':'30px', 'color':'red', 'margin-top': '20px', 'margin-bottom': '20px' } }, created() { this.myInterval = setInterval(() => { this.showDoctor = !this.showDoctor; },1000);
// 利用Promise对象的特性，保证动画链式显示 new Promise((resolve, reject) => { setTimeout(() => { this.show1 = true; resolve(); }, 600); }).then(() => { return new Promise((resolve, reject) => { setTimeout(() => { this.show2 = true; resolve(); }, 600); }).then(() => { return new Promise((resolve, reject) => { setTimeout(() => { this.show3 = true; resolve(); }, 600); }).then(() => { return new Promise((resolve, reject) => { setTimeout(() => { this.show4 = true; }, 600); }) }) }) }); } }) </script> </body> </html>