admin 管理员组文章数量: 887018
css怎么同时设置过渡动画,Vue
在此之前，我们已经有了过渡动画以及@keyframes动画的基础，但往往能够单独使用他们是不够的，我们需要将二者结合
关于初次加载元素
在animate.css的代码基础上我们可以发现，当页面第一次渲染元素时，并没有出场动画，为了解决这个问题我们需要再添加两个属性
name="fade"
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"
>
Good Moring戳一戳
复制代码
对比代码可以看出，我们添加了appear和appear-active-class两个属性，这两个属性的意思是我们在元素出现时也有一个动画效果，这个动画效果与我们点击后出现的动画效果保持一致即可
过渡与animate结合
在页面搭建时，我们往往需要将两种动画效果相结合，过渡是通过transition来实现，而animate是通过 @keyframes 来实现
step1：搭建一个animate动画效果的代码结构
step2：给自定义的class名添加我们在过渡动画时使用的class名
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
复制代码
step3:根据过渡动画的内容添加CSS样式
.fade-enter{
opacity: 0
}
.fade-enter-active{
transition: opacity 3s
}
.fade-leave-to{
opacity: 0
}
.fade-leave-active{
transition: opacity 3s
}
复制代码
叠加动画效果的时间问题
在这里我们使用了两个动画效果，那这时动画的持续时间到底服从哪一个则没有定论，所以我们需要对此进行设置
type
在上述例子中，过渡动画持续了3s，animate持续为1s，我们以长的时间为例，在transition标签内添加type属性
复制代码
这样动画的持续效果即由过渡动画决定，即为3s
duration
我们也可以自定义动画的时长，在transition标签内添加:duration
复制代码这里的数字所代表的时间单位为ms
我们也可以对出现和消失动画的时长分别设置
复制代码
完整代码展示
.fade-enter{
opacity: 0
}
.fade-enter-active{
transition: opacity 3s
}
.fade-leave-to{
opacity: 0
}
.fade-leave-active{
transition: opacity 3s
}
复制代码
:duration="{enter:5000,leave:5000}"
type="transition"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
Good Moring戳一戳
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = ! this.show;
}
}
})
复制代码
本文标签： css怎么同时设置过渡动画 Vue
版权声明：本文标题：css怎么同时设置过渡动画,Vue 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1731166340h1456994.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论