1.transition css过度动画

<html>
  <style>
 .fade-enter-active, .fade-leave-active {
  transition: opacity 2.5s  
}
.fade-enter, .fade-leave-active {
  opacity: 0; 
}
<!-- 这里之所以不用使用 写opacity: 1; 是因为元素原来默认就是opacity: 1 -->
<!-- 正确写法应该加上 .fade-enter-to { opacity: 1; }  -->
<!-- 只有触发元素dom变化transition才会生效 ，transition 标签必须包裹 对应的标签，fade可以自由定义  -->
</style>
<div id="app">             
    <button v-on:click="show = !show">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
  <script>
    // 1.创建vue实例
    const app = new Vue({
      el: '#app',
      data() {
        return {
          show: true,
        }
      },
    })
  </script>
  
</html>
复制代码

1.v-enter ：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
```
  .fade-enter { opacity: 0; } 
复制代码
```

v-enter-active ：定义进入过渡生效时的状态。在元素被插入之前生效，在过渡/动画完成之后移除。
```
 .fade-enter-active { transition: opacity .5s; } 
复制代码
```
v-enter-to : 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
```
 .fade-enter-to { opacity: 1; } 
复制代码
```
v-leave : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
```
 .fade-leave { opacity: 1; } 
复制代码
```
v-leave-active ：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
```
 .fade-leave-active { transition: opacity .5s; }
复制代码
```
v-leave-to : 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
```
 .fade-leave-to { opacity: 0; }
 
复制代码
```

2.transition + 第三方

通过自定义过度类名可以有效结合Animate.css这类动画库制作更精美的动画效果。

引入animate.css

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
复制代码

transition设置

<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"> 
复制代码

3.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: {
        toggle() {
          this.show = !this.show;
        },
        beforeEnter(el){
          // 动画初始状态
          el.style.opacity = 0;
        },
        enter(el, done){
          // 触发回流激活动画
          document.body.offsetHeight;//必须加上 才会触发回流/重排
          // 动画结束状态
          el.style.opacity = 1;
          // 监听动画结束事件，并执行done ，只有调用done vue才知道动画已经结束
          el.addEventListener('transitionend', done)
        },
        beforeLeave(el){
          // 动画初始状态
          el.style.opacity = 1;
        },
        leave(el, done){
          // 触发回流激活动画
          document.body.offsetHeight;//必须加上 才会触发回流/重排
          // 动画结束状态
          el.style.opacity = 0;
          // 监听动画结束事件，并执行done ，只有调用done vue才知道动画已经结束
          el.addEventListener('transitionend', done)
        },
      },
    })
复制代码

4.transition + 纯第三方js方案


<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"> </script>

 methods: {
        toggle() {
          this.show = !this.show;
        },
        beforeEnter(el){
          // 动画初始状态
          el.style.opacity = 0;
        },
        enter(el, done){
          Velocity(el, { opacity: 1 }, { duration: 1500, complete: done })
        },
        beforeLeave(el){
          // 动画初始状态
          el.style.opacity = 1;
        },
        leave(el, done){
          Velocity(el, { opacity: 0 }, { duration: 1500, complete: done })
        },
      },

复制代码

4.transition group + 批量动画

利用transition-group可以对v-for渲染的每个元素应用过度

   <transition-group name="fade">
                <div v-for="c in courses" :key="c.name" 
                  @click="selectedCourse = c">
                  {{ c.xxxx }}
                </div>
              </transition-group>
复制代码