animate和过度动画同时使用.html
2021-06-05 10:01
标签：span aci enter cti his ted 显示 依据 duration 1将animate和过度动画的类名添加到transition对应的类上 2appear 设置初始样式（页面刷新样式）appear-active-class 3type设置动画时间依据类型（transition或animate） 4可以通过:duration来设置动画时间，补充3 animate和过度动画同时使用.html 标签：span aci enter cti his ted 显示 依据 duration 原文地址：https://www.cnblogs.com/em2464/p/12335224.html style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 1s;
}
style>
head>
body>
div id="root">
transition name=‘fade‘
appear
appear-active-class=‘animated tada‘
enter-active-class=‘animated tada fade-enter-active‘
leave-active-class=‘animated rubberBand fade-leave-active‘
>
h1 v-show=‘show‘>
最是年少时模样
h1>
transition>
button @click=‘change‘>切换button>
div>
script>
var vm=new Vue({
el:‘#root‘,
data:{
show:true
},
methods:{
change:function(){
this.show=!this.show;
}
}
})
script>
body>
上一篇：控件-Web控件：OWC控件
下一篇：html快速入门
文章标题：animate和过度动画同时使用.html
文章链接：http://soscw.com/index.php/essay/90817.html