Vue过渡与动画

一、vue过渡与动画概述

1、Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。

二、transition组件

1、Vue提供了实现过渡动画的内置组件 transition。基本用法就是给我们需要动画的标签外面嵌 套 transition 标签，并且给上属性。实现过渡动画一般格式。

2、Vue提供了6个CSS类名在enter/leave的过渡中切换。(图示)

Enter（隐藏）

Opacity: 0  -----➤  Opacity: 1

|                    |

v-enter           v-enter-to

|                    |

---------------------

|

v-enter-active

Leaver（显示）

Opacity: 1  -----➤  Opacity: 0

|                    |

v-leave           v-leave-to

|                    |

---------------------

|

v-leave-active

隐藏：

v-enter：定义进入过渡的开始状态。

v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：定义进入过渡的结束状态。

显示：

v-leave：定义离开过渡的开始状态。

v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：定义离开过渡的结束状态。

3、transition组件的使用

  
  
  

   

  

    点击
    
      
Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。
          
          
  

   

我们可以从第15行的代码transition: opacity 1.5s和第26行的代码transition: opacity 1.5s中看出是一样的，所以他们的类名可以写在一起，即

.v-leave-active,.v-enter-active{
    transition: opacity 1.5s
}

三、过渡的类名

1、如果 transition 组件定义了name（类名）,这时该transition 组件只会使用name（类名）开头的过渡动画。例如： transition 组件定义了类名fade，则该组件使用.fade-leave{opacity: 1},大括号里面的动画效果样式可以在网络上找来写。

2、案例

  
  
  




  


    点击1(取别名:fade)
    
      
Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或animate.css)来实现动画效果。
    

    点击2(不取别名)
    
      
若transition没有取别名，则默认使用v-开头的代码动画效果。
    

  

其中，我给按钮点击1取了类名fade，所以按钮点击1使用fade开头的动画效果，有显示和隐藏的渐变动画效果，但是我没有给按钮点击2取类名，所以按钮点击2默认使用v-开头的动画效果，只有隐藏到显示的动画效果。具体请观看上面的代码案例。

3、常用的过渡使用通常使用 CSS 过渡。在代码中设置 CSS 样式来实现过渡 v-enter-active 、 v-leave-active 、 v-enter 、 v-leave-to  具体请观看上面的代码案例。

4、Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。

条件渲染 (使用 v-if)、条件展示 (使用 v-show)、动态组件、组件根节点

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

四、动画库animate.css（官网：https://animate.style/）

1、在实现动画中会用到自定义过渡类名，可以通过以下特性来自定义过渡类名

enter-class 、leave-class 、enter-to-class 、leave-to-class 、leave-active-class 、enter-active-class 。它们的优先级高于普通的类名，对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 animate.css 相 结合使用非常有用。

2、animate.css动画库使用方法：在想有动画的transition标签上面加上 animate__animated 和其他你想要的的动画效果，比如animate__bounce （跳动的动画），就可以实现一个酷炫的CSS动画效果了。

3、animate.css动画库案例

  
  
  
  


  


    点击
    
    
    
      
Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。
        

  

   

五、多个元素的过渡

1、当有相同标签名的元素切换时，需要通过 key属性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

例如：我们写一个按钮控制文本A隐藏，当文本A隐藏后，紧接着文本B显示，文本A、B用的都是相同的

标签，而且我们也给他们设置了动画效果。如果我们不给

标签设置唯一的值（key属性），在显示和隐藏的过程中，会失去动画效果。具体请观看一下案例代码。

2、案例

  
  
  
  


  


    点击
    
    
     
      
Vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，
 

        
也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。
        

  

   

3、同时生效的进入和离开的过渡如果不能满足所有要求， Vue 提供了 过渡模式。如果没有加入过渡模式，则多个动画将同时生效。

in-out：新元素先进行过渡，完成之后当前元素过渡离开。

out-in：当前元素先进行过渡，完成之后新元素过渡进入。