vue----transition动画

向右看齐 2021-12-23 10:13 377阅读 0赞

**动画原理**

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

**动画是如何进行显示的**

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

动画 仅支持c3动画 透明度

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

![Image 1][]

**设置单个div动画案例**

需要控制show的值得变化
     
    <template>
    <transition name="fade">
            <div class="leftNav" v-show="show"></div>
    </transition>
    </template>
      
     
     
    <style>
     
    /*设置动画*/
        .fade-enter,.fade-leave-to{
                transform: translateX(-100%);
         }
        .fade-enter-active,.fade-leave-active{
                transition: 1s;
        }
        .fade-enter-to{
                transform: translateX(0)
        }
     
    </style>

**设置一组div动画案例**

<transition-group name="move">
                  <div class="box" v-show="show" key="1"></div>
                  <div class="box" v-show="show" key="2"></div>
                  <div class="box" v-show="show" key="3"></div>
                  <div class="box" v-show="show" key="4"></div>
       </transition-group>
     
     
    <style>
    /*设置动画*/
        .move-enter,.move-leave-to{
                transform: translateX(-100%);
         }
        .move-enter-active,.move-leave-active{
                transition: 1s;
        }
        .move-enter-to{
                transform: translateX(0)
        }
     
    </style>

**动画插件的的使用**

1.从swiper官网上下载animate.css
     
    2.在main.js中引入animate.css
     
    3.使用
    注意：当使用多个动画时，必须要用<transition></transition>进行包裹，
     <template>   
    <transition name="slide"
        enter-to-class=" bounceInRight"    //进入时所用的动画为bounceInRight
        leave-to-class="lightSpeedOut"    //离开时所用的动画为lightSpeedOut
        enter-active-class="animated"    //进入时，所需的时间animated
        leave-active-class="animated"    //离开时所需的时间animated， 上述这些都是类名.在animate.css文件中都可以查到
    >
        <div class="box" v-show="show"></div>
     
    </transition>
     
    </template>

转载于:https://www.cnblogs.com/SRH151219/p/10423192.html

[Image 1]: