119、VUE2 过渡效果---transition

1.理解VUE---过渡效果

1. 过渡的-css-类名
会有4个(css) 类名在 enter/leave 在过渡中切换。
1. v-enter: 进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3. v-leave 离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4. v-leave-active 离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
看如下图所示：

在enter/leave 过渡中切换的类名，v- 是类名的前缀，使用 可以重置前缀，比如 v-enter 替换为 my-transition-enter。
看如下demo

  
    
    
  
  
    

      toggle
      
        
hello
      
    
  
  
  

查看效果

如上代码； 给transition标签 定义了一个name属性，因此过渡的css类名中的前缀v被替换成fade，定义了 .fade-enter-active, .fade-leave-active {transition: opacity .5s } 过渡动画，定义进入过渡的结束状态和离开过渡的结束状态 为透明度0 在0.5s之内完成。

我们还可以定义如下的css，实现动画，如下css代码：

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

查看效果

2. css动画
css动画用法同css过渡一样， 区别是在动画中 v-enter 类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。如下代码也可以用在css动画下。

  
    
    
  
  
    

      toggle
      
        
hello
      
    
  
  
  

查看效果

3. 自定义过渡类名
上面的四个过渡类名都是根据transition的name属性自动生成的，下面我们可以通过以下特性来自定义过渡类名。

enter-class
enter-active-class
leave-class
leave-active-class

以上的优先级都高于普通类名，通过以上的 我可以自定义类名写不同的样式了，如下代码：
如下使用的animate.css里面的样式实现动画：如下代码：

  
    
    
  
  
    

      toggle
      
        
hello
      
    
  
  
  

查看效果

4. 多个组件的过渡
多个组件的过渡可以使用动态组件实现，如下代码：

  
    
    
  
  
    

      
      A
      
      B
      
        
      
    
  
  
  

查看效果

5. javascript钩子函数
除了使用css过渡的动画来实现vue的组件过渡，还可以使用javascript钩子函数来实现。在钩子函数中直接操作dom。我们在属性中声明如下钩子。
代码如下：

new Vue({
  el: '#app',
  data: {
    view: 'v-a'
  },
  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: function(el) {
      // ....
    }
  }
})

注意：
1. 只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。
2. 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
下面是vue教程上Velocity.js的一个demo，如下代码：

  
    
    
  
  
    

      toggle
      
        
Demo
      
    
  
  
  
  

查看效果

理解过渡模式：
如下demo

  
    
    
  
  
    

      
        on
        off
      
    
  
  
  

查看效果

运行一下，在上面的on按钮 和 off按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 的默认行为 - 进入和离开同时发生。
但是我们在元素绝对定位在彼此之上的时候运行正常：如下代码：

  
    
    
  
  
    

      

        
          on
          off
        
      
    
  
  
  

查看效果

我们加上 translate 让它们运动像滑动过渡：代码如下：

  
    
    
  
  
    

      

        
          on
          off
        
      
    
  
  
  

查看效果

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
用 out-in 重写之前的开关按钮过渡：如下代码：

  
    
    
  
  
    

      

        
          on
          off
        
      
    
  
  
  

查看效果

in-out 滑动淡出demo如下：

  
    
    
  
  
    

      

        
          on
          off
        
      
    
  
  
  

查看效果

5. VUE列表过渡实现轮播图
列表过渡使用 组件，不同于 ：
1. 它会以一个真实元素呈现：默认为一个 。你也可以通过 tag 特性更换为其他元素。
2. 内部元素 总是需要 提供唯一的 key 属性值。

  
    
    
  
  
    

      
        

          
            
          
        
      
      

        {{index}}
      
    
  
  
  

查看效果