vue动画

发布时间：2023-12-30 10:30

补充vue动画：在vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。

6个状态对应6个类名：

进入（显示，创建）
- v-enter-from 进入前（vue2.0 v-enter）
- v-enter-active 进入中
- v-enter-to 进入后
离开（隐藏，移除）
- v-leave-from 进入前（vue2.0 v-leave）
- v-leave-active 进入中
- v-leave-to 进入后

多个transition使用不同动画，可以添加nam属性，name属性的值替换v即可。

如果元素或组件离开，完成一个淡入淡出效果

并且，6个状态都需要设置在css中哈~，例如：



  100


// 如果没有设置name为fade，则就写成v-enter-from等等，如果设置了name，就写设置的name
.fade-enter-from {
    opacity: 0
}
.fade-enter-active {
    transition: all 2s;
}
.fade-enter-to {
    opcaity: 1
}
.fade-leave-from {
    opacity: 1
}
.fade-leave-active {
    transition: all 2s;
}
.fade-leave-to {
    opcaity: 0
}

vue动画

相关推荐