vue----transition动画

动画原理

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动画包括位移缩放倾斜旋转等

设置单个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>

vue----transition动画

猜你喜欢