在vue中，实现过渡动画一般是下面这样：
rush:xhtml;">
在vue中，实现过渡动画一般是下面这样：
用一个transition对元素或者组件进行封装.
上面是官方文档的原话，但是这4个类名如何运用呢？下面看个例子
css:
.example {
width: 100px;
height: 100px;
transform: translate3d(0,-100px,0);
}
.fold-enter-active,.fold-leave-active {
transition: all .5s;
}
.fold-enter,.fold-leave-active {
transform: translate3d(0,0);
}
这里的fold-enter，是在元素显示的一瞬间被加入，然后瞬间被移除，在上面的例子中，example这个块状元素本来因为有了transform: translate3d(0,0)这个样式，所以被上移了100px,但是因为fold-enter，所以将example这个块状元素移到了原位，但是fold-enter因为瞬间就被移除掉了，所以这时候的元素的样式又变成了transform: translate3d(0,0),但是这时候fold-enter-active这个样式就生效了，因为设置了transition: all .5s,所以元素会在0.5s的时间内上移100px,在过渡动画结束之后,fold-enter-active这个类马上被移除.
example不会马上消失，这个时候fold-leave-active这个类就起作用了,example这时的位置是在-100px，fold-leave-active定义的是过渡的结束状态：transform: translate3d(0,0);，但是同时又设置了transition: all .5s，所以这时元素会在0.5s的时间内下移100px.之后fold-leave-active被移除.
官网的一张图
不过用的不多，可以在methods中定义这些方法.
以上这篇简单谈谈vue的过渡动画(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
