动画原理

1、如果想要给哪个元素添加动画那么必须给当前元素添加一个标签transitionn，name为动画的名称
        2.如果需要一组元素进行动画的时候需要将transition标签换成 transition-group切记设置一下key值  因为：   当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。 2、当前元素必须是显示/隐藏的状态 v-if v-show（当前元素必须要设置v-if 或者 v-show,否则动画不会显示）

动画是如何进行显示的

在进入/离开的过渡中，会有 6 个 class 切换。 进入时：1. 
       
        -enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。（瞬间被移除） 2. 
        
         -enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。 　　　　　　　　　　　　这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 3. 
         
          -enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)， 　　　　　　　　　　　　在过渡/动画完成之后移除。 离开时： 4. 
          
           -leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。（瞬间被移除） 5. 
           
            -leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。 　　　　　　　　　　　　这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 6. 
            
             -leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 注意：　　〈name名〉-enter-active 和 
             
              -enter-to 〈name名〉-end-active 和 
              
               -end-to
              
             
            
           
          
         
        
       

动画

仅支持c3动画 透明度

c3动画包括 位移    缩放    倾斜    旋转等

 

 

 

 设置单个div动画案例

需要控制show的值得变化 
          

设置一组div动画案例

 

动画插件的的使用

1.从swiper官网上下载animate.css 2.在main.js中引入animate.css 3.使用注意：当使用多个动画时，必须要用
      进行包裹，