javascript - vue过渡效果 css过渡 类名的先后顺序
本文介绍了javascript - vue过渡效果 css过渡 类名的先后顺序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
给一个元素设计过渡,理想效果是出现时高度递增,消失是高度递减。
设计的代码如下:
.collapse-enter-active,
.collapse-leave-active {
transition: height .5s;
}
.collapse-enter,
.collapse-leave-active {
height: 0;
}
.collapse-leave {
height: 100px;
}
.collapse-enter-active {
height: 100px;
}
结果元素出现时,高度直接到达100px,消失时正常,修改代码的顺序如下:
.collapse-enter-active,
.collapse-leave-active {
transition: height .5s;
}
.collapse-enter-active {
height: 100px;
}
.collapse-enter,
.collapse-leave-active {
height: 0;
}
.collapse-leave {
height: 100px;
}
问题解决了,不明白顺序为什么会造成影响,过渡效果不是在通过切换css来实现的么,应该不是覆盖的问题吧?
具体效果可以点击查看 jsbin
解决方案
@CRIMX 的答案已经讲清楚了,本质上就是 enter 和 enter active 两个类会在第一帧同时存在于动画元素上,而后通过移除 enter 类执行动画,因此不能让 active 类的样式提前生效。
两个类的方式虽然足以完成动画,但确实不太容易理解,所以 vue 2.1.8 开始增加了 to 的类名,可以将动画的结束态从 active 类中剥离出来,更方便理解,避免产生顺序覆盖问题。
这篇关于javascript - vue过渡效果 css过渡 类名的先后顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文