<!--模板-->
<template>
<div name="users">
<hr>
<!--过渡-->
<button @click="showHide">按钮</button>
<transition name="fade">
<p v-if="show">显示与隐藏</p>
</transition>
<!--动画-->
<button @click="showAnim">按钮</button>
<transition name="Anim">
<p v-if="hello">动画效果</p>
</transition>
<!--引入animate动画库-->
<button @click="showAn">按钮</button>
<!--
enter-class (从无到有开始)
enter-active-class (从无到有过程中)
enter-to-class (2.1.8+) (从无到有结束)
leave-class (从有到无开始)
leave-active-class (从有到无过程中)
leave-to-class (2.1.8+) (从有到无结束)
-->
<transition name="an" enter-to-class="animated tada" leave-active-class="animated bounceOutRight">
<p v-if="dh">动画库</p>
</transition>
</div>
</template>
<!--行为-->
<script>
export default {
name: 'users',
data () {
return {
show:true,
hello:true,
dh:true
}
},
methods:{
showHide:function(){
this.show = !this.show;
},
showAnim:function(){
this.hello = !this.hello;
},
showAn:function(){
this.dh = !this.dh;
}
}
}
</script>
<!--样式-->
<style>
/*这里是 opacity 从1到0 的过程(从有到无的过程,元素默认是无,所以从这里是开始)*/
.fade-leave { /*1:过渡离开时(从有到无开始执行时)*/
transform: translateX(0);
}
.fade-leave-active { /*2:过渡生效时(从有到无的过程中)*/
transition: all 1s;
}
.fade-leave-to{ /*3:过渡离开结束时(从有到无执行完毕后)*/
transition: all 1s;
opacity: 0;
transform: translateX(10px);
}
/*这里是 opacity 从0-1 的过程(从无到有的过程)*/
.fade-enter{ /*4:过渡开始时(从无到有开始执行时)*/
opacity: 0;
transform: translateX(10px);
}
.fade-enter-active { /*5:过渡生效时(从无到有的过程中)*/
transition: all 1s;
color: red;
}
.fade-enter-to{ /*6:过渡结束时(从无到有执行完毕后)*/
opacity: 1;
color: yellow;
transform: translateX(0);
}
.Anim-enter-active, .fade-enter{
animation: bounce-in 1s ease;
}
.Anim-leave-active{
animation: bounce-in 1s ease reverse;
}
@keyframes bounce-in {
0% {
/*transform: scale(0);*/
font-size:10px;
}
100% {
/*transform: scale(1);*/
font-size:20px;
}
}
*{
font-size:20px;
}
</style>
Vue中的CSS过渡的6个过程
猜你喜欢
转载自blog.csdn.net/Byte_Dance/article/details/82934404
今日推荐
周排行