一、背景

Vue 在插入、更新或者移除 DOM 时，使用动画能让页面效果更炫。

二、实现

使用Vue的transition组件 + 对应的css样式来实现

transition组件：包含过渡方式和动画方式

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css

（1） 单元素 + 动画方式 + 样式以v开头

• 无name属性时，css的class名用 "v-" 前缀
• css样式采用keyframes自定义动画

// html部分：

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

// 结合css样式来实现

/* 进入的时候要激活的样式 */
.v-enter-active { 
   animation: bounce-in .5s; 
} 
/* 离开的时候要激活的样式 */
.v-leave-active { 
   animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
   0% { 
      transform: scale(0); 
   } 
   50% { 
      transform: scale(1.5);
   } 
   100% { 
      transform: scale(1); 
   }
}
  

（2） 单元素，动画方式，name="fade"

• 有name属性时，css的class名用 "【name名称-" 前缀
• css样式采用keyframes自定义动画

// html部分：

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

// 结合css样式来实现

/* 进入的时候要激活的样式 */
.fade-enter-active { 
   animation: bounce-in .5s; 
} 
/* 离开的时候要激活的样式 */
.fade-leave-active { 
   animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
   0% { 
      transform: scale(0); 
   } 
   50% { 
      transform: scale(1.5);
   } 
   100% { 
      transform: scale(1); 
   }
}
  

（3） 单元素，过渡方式

• 在进入/离开的过渡中，会有此6个class 切换。

  v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to

// html部分：

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

// 结合css样式来实现
fade-enter-active { 
  // 进入的过程中，加上transition属性
  transition: all .3s ease;
} 
.fade-leave-active {
  // 离开的过程中，加上transition属性
  transition: all .3s ease
}
/* 进入的起点、离开的终点的样式 */
.fade-enter，.fade-leave-to  { 
   transform: translateX(-100%);
} 
/* 进入的终点、离开的起点的样式 */
.fade-enter-to， fade-leave { 
   transform: translateX(0);
}

（3） 多元素应用动画

那么怎么同时渲染整个列表，比如使用 v-for？在这种场景中，使用 <transition-group> 组件。

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

（4） 自定义过渡

我们可以通过以下 attribute 来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

此例： enter-active-class、leave-active-class只需要去Animate.css找对应效果的class类即可。

<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"> Toggle render </button>
    <transition
       name="custom-classes-transition"
       enter-active-class="animated tada"
       leave-active-class="animated bounceOutRight"
    >
       <p v-if="show">hello</p> 
    </transition> 
</div>

（4） 初始渲染的过渡

可以通过 appear attribute 设置节点在初始渲染的过渡。

<transition appear> 
  <p v-if="show">hello</p> 
</transition>