1. vue内置组件transition
动画第一步把要做动画的语句添加到transition中,其中name可以定义前缀,下面的事件在添加动画时就可以写my-enter,my-leave-to,从而可以设置不同区域具有不同的动画效果。
<transition name="fade">
<div v-show="show"></div>
</transition>
-----------------------------------
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
进入时 class 的类型分为以下几种
-enter
-enter-active
-enter-to
离开时 class 的类型分为以下几种
-leave
-leave-active
- leave-to