vue动画

<Transition> 组件

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

vue2

进入

• v-enter 进入前
• v-enter-active 进入中
• v-enter-to 进入后

离开

• v-leave 离开前
• v-leave-active 离开中
• v-leave-to 离开后

vue3

进入

• v-enter-from 进入前
• v-enter-active 进入中
• v-enter-to 进入后

离开

• v-enter-from 进入前
• v-enter-active 进入中
• v-enter-to 进入后

使用案例

<Transition name="fade">
    <homeSkeleton v-if="show" @click="show=!show"/>
</Transition>

css

.fade{
  &-leave {
    &-active {
      position: absolute;
      width: 100%;
      transition: opacity 15s .2s;
      z-index: 1;
    }
    &-to {
      opacity: 0;
    }
  }
}

逐渐消失的动画效果