一张图,理解 Vue中CSS动画原理
图片来源:自己画的
↑ 上图展示了,元素从显示到隐藏,从隐藏再到显示,各关键时间节点,class的添加和移除状态。
↓ 下图展示了,实现淡入淡出效果的 class 设置。
// 淡入
v-leave-active {
transition: opacity 3s;
}
v-leave-to {
opacity: 0;
}
// 淡出
v-enter {
opacity: 0;
}
v-enter-active {
transition: opacity 3s;
}