vue 动画的挂载方式

声明

---

   该文章仅用于个人学习，文中内容均来在 vue.js 官网，在此记录只是便于个人的理解

   Vue.js 官网(下面内容的来源)https://cn.vuejs.org/v2/guide/transitions.html

简要

---

   Vue 中有对 DOM 进行的过渡效果操作，感觉是对数据的呈现，更新，删除等一系列操作设定过渡的动画，更偏向于对数据的操作

使用过渡对元素的各个周期进行不同动画的定义

---

   1. css 书写动画用过渡来确定动画执行的时期

   2. 第三方动画库引入，通过自定义过渡来确定动画执行的时期

   3. 在 methods 中通过 js 书写动画，通过 JavaScript 钩子来挂载动画

使用 css 书写动画时，需要用过渡来用于挂载动画

  v-enter: 进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  v-enter-active: 进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之
                  前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的
                  过程时间，延迟和曲线函数。
  v-enter-to: 进入过渡的结束状态。在元素被插入之后下一帧生效(此时 v-enter 被移除)
              在过渡/动画完成之后移除。
  v-leave: 离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  v-leave-active: 离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触
                  发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过
                  渡的过程时间，延迟和曲线函数。
  v-leave-to: 离开过渡的结束状态。在离开过渡被触发之后下一帧(此时 v-leave 被移除)，
              在过渡/动画完成之后移除。

每个过渡对应着元素显示或移除的各个时期

1-2-1.PNG

如下(该例子来自 vue 官网上)

  
    
    
    
    
  
  
  

    
      Toggle
    
    

    
      
hello
    
  
  
  

解释

   1. 通过 script 标签从 cdn 中引入
   2. transition 包裹了要过渡的元素
   3. show =! show 将 show 取反，再用于 v-if 的判断是否显示
   4. 使用的是 css 进行动画过渡

还可以引用第三方动画库的动画，这里需要用到自定义过渡类名

自定义过渡的类名

   enter-class
   enter-active-class
   enter-to-class
   leave-class
   leave-active-class
   leave-to-class
   对应的时期与上面的列出来的过渡的类名的时期相对应

如下(该例子来自 vue 官网上)

  
    
    
    
    
  
  
  

    
      Toggle render
    
    

    
      
hello
    
  
  
  

解释

   1. 通过 link 标签引入第三方动画库
   2. 自定义过渡的类名，将第三方动画引入在适用的时期
   3. 通过 v-if 控制显示与移除

使用 methods 方法和 vue 过渡钩子来挂载动画

vue 过渡钩子

   // 过渡动画进入时
   before-enter     进入前
   enter            进入中
   after-enter      进入后
   enter-cancelled  取消时被调用
   // 过渡动画离开时
   before-leave     离开前
   leave            离开中
   after-leave      离开后
   leave-cancelled  取消时被调用

如下(该例子来自 vue 官网上)

  
    
    
    
    
    
  
  
  

    
      Toggle
    
    

    
      
Demo
    
  
  
  

解释

   1. 通过 script 标签将 velocity 引入
   2. 在 transition 中用过渡钩子挂载动画函数
   3. 在 methods 中书写动画函数
   4. duration 定制了时间(单位毫秒)