vue过渡动效

在使用VUE进行开发组件，组件之间使用v-if来进行控制显隐，整体的画面切换是比较生硬的，可以使用过渡动效来让切换更加的流畅。

基础使用：<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果。

<transition>
  <router-view></router-view>
</transition>

1、单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。

1、条件渲染 (使用 v-if)
2、条件展示 (使用 v-show)
3、动态组件
4、组件根节点

简单示例：

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

可以设置过渡样式：

.fade-enter-active, .fade-leave-active { transition: opacity .5s; }
.fade-enter, .fade-leave-to { opacity: 0; }

该过渡的类名：在进入 / 离开的过渡中，共有6个class切换：

1、v-enter：刚进入到过渡开始状态。元素插入前生效，元素插入后下一帧移除。

2、v-enter-active：进入到过渡生效时的状态。整个过渡阶段，元素被插入前生效，在过渡/动画完成后移除。

3、v-enter-to：进入到过渡的结束状态。元素被插入后下一帧生效（v-enter被移除），在过渡/动画完成之后移除。

4、v-leave：离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5、v-leave-active：离开过度生效时的状态。离开过渡被触发时立刻生效，在过渡/动画完成之后移除。

6、v-leave-to：离开过渡的结束状态。在离开过渡被触发后下一帧生效（v-leave被删除）在过渡/动画完成之后移除。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

2、CSS过渡

过渡常见的就是使用css过渡。

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

.slide-fade-enter-active { transition: all .3s ease; }
.slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); }
.slide-fade-enter, .slide-fade-leave-to{ transform: translateX(10px); opacity: 0; }

3、CSS动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<div id="example-2">
  <button @click="show = !show">click</button>
  <transition name="bounce">
    <p v-if="show">css animated</p>
  </transition>
</div>

.bounce-enter-active { animation: bounce-in .5s; }
.bounce-leave-active { animation: bounce-in .5s reverse; }
@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

4、结合Animate.css实现动画

可以结合使用第三方CSS动画库来实现动画效果。

https://animate.style/

示例代码：

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
  <button @click="show = !show"> Click </button>
  <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
    <p v-if="show">hello</p>
  </transition>
</div>

5、JavaScript钩子

在 transition 执行动画的时候，每一个过渡动画都有对应的钩子方法。

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled">
</transition>

对应的 methods：

methods: {
  beforeEnter: function (el) {},
  enter: function (el, done) { done(); },
  afterEnter: function (el) { },
  enterCancelled: function (el) { },
  // 离开时
  beforeLeave: function (el) { },
  leave: function (el, done) { done(); },
  afterLeave: function (el) { },
    // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) { }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。