前面的话

　　与不同，JS过渡主要通过事件进行触发。本文将详细介绍Vue过渡效果之JS过渡

 

事件钩子

　　JS过渡主要通过事件监听事件钩子来触发过渡，共包括如下的事件钩子

　　下面各个方法中，函数中的参数el表示要过渡的元素，可以设置不同情况下，el的位置、颜色等来控制其动画的改变

// ...methods: {  // --------  // 进入中  // --------  beforeEnter: function (el) {    // ...  },  // 此回调函数是可选项的设置  // 与 CSS 结合时使用  enter: function (el, done) {    // ...    done()  },  afterEnter: function (el) {    // ...  },  enterCancelled: function (el) {    // ...  },  // --------  // 离开时  // --------  beforeLeave: function (el) {    // ...  },  // 此回调函数是可选项的设置  // 与 CSS 结合时使用  leave: function (el, done) {    // ...    done()  },  afterLeave: function (el) {    // ...  },  // leaveCancelled 只用于 v-show 中  leaveCancelled: function (el) {    // ...  }}

　　上面方法中，有两个方法比较特殊，是enter()和leave()方法，它们接受了第二个参数done。当进入完毕或离开完毕后，会调用done()方法来进行接下来的操作

　　[注意]对于仅使用JS过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响

【简单事例】

　　下面是一个JS过渡的简单事例

     
  
      Toggle  
          
       
Demo
  
      
     

 

初始渲染过渡

　　可以通过 appear 特性设置节点的在初始渲染的过渡，自定义 JavaScript 钩子

　　下面是一个例子

     
  
      还原  
          
       
小火柴的蓝色理想