<!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{
width: 200px;
height: 200px;
background-color: red;
}
.box02{
width: 200px;
height: 200px;
background-color: blue;
}
.div_transition_text{
overflow: hidden;
background-color: pink;
height: 260px;
width: 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;
width: 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>
