写在前面

        朋友们晚上好呀~今天讲vue的动画 ^_^。

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

​

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

<transition name="fade">
  <p v-if="show">100</p>
</transition>

<style>
.fade-leave {
    opacity: 1
}
.fade-leave-active {
    transition: all 1s;
}
.fade-leave-to {
    opcaity: 0
}
</style>

• 进入（显示，创建）

  • v-enter 进入前 （vue3.0 v-enter-from）
  • v-enter-active 进入中
  • v-enter-to 进入后

• 离开（隐藏，移除）

  • v-leave 离开前 （vue3.0 v-leave-from）
  • v-leave-active 离开中
  • v-leave-to 离开后

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

写在后面

        下期见~