过渡&动画

68 阅读1分钟

过渡的类名

总结: image.png

v-enter-to 和 v-leave不常用,因为进入的最后状态就是元素本身的样式,离开的最初状态也是元素本身的样式,所以是没有必要写的。 v-enter 和 v-leave-to 常用,定义过渡的开始和结束状态。 v-enter-active和 v-leave-active 常用,被用来定义进入过渡的过程时间,延迟和曲线函数。

// 元素的显示和隐藏
.expand-enter, .expand-leave-to {
    opacity: 0;
    transform: translateY(20px);
}
.expand-enter-active, .expand-leave-active {
    transition: all 0.5s ease;
}