vue过渡&动画的使用

时间 2019-11-16

标签 vue 过渡动画使用繁體版

原文原文链接

概述：

Vue 在插入、更新或者移除 DOM 时，提供多种不一样方式的应用过渡效果。css

包括如下工具：vue

在 CSS 过渡和动画中自动应用 class
能够配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操做 DOM
能够配合使用第三方 JavaScript 动画库，如 Velocity.js

前言：

在平常开发中动画是必不可少的一部分不只能让元素直接的切换显得更加天然同时也能极大的加强用户体验所以在Vue之中也提供了很是强大的关于动画这方面的支持 Vue不只支持用CSS来写一些过渡效果同时也是支持JS的不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.git

过渡类名实现动画：

先丢一张官方文档偷的图：github

动画进入:

v-enter：动画进入以前的初始状态
v-enter-to：动画进入以后的结束状态
v-enter-active：动画进入的时间段

PS：第1、第二个是时间点；第三个是时间段。bash

动画离开：

v-leave：动画离开以前的初始状态
v-leave-to：动画离开以后的结束状态
v-leave-active：动画离开的时间段

PS：第1、第二个是时间点；第三个是时间段。注意：关于概念官方文档有更具体的解释。函数

过渡动画实现的原理：

1.首先最基础的一点在于 若是你想要在单元素/单个组件之中实现过渡动画 那么 你须要在元素/组件所在的HTML标签以外包裹一层 <transition>标签，不管是过渡仍是动画 都须要这个<transition>包起来。

2.当元素/组件被<transition>标签包裹了之后 那么Vue会自动的为咱们构建一个动画流程 具体的流程会在下文提到 所以先记住这句话就行啦 也就是说 若是你在<style>标签中添加了一些样式的话Vue会自动的在某个时间节点给元素或者组件添加、删除对应的样式

3.上面提到了当元素/组件被<transition>标签包裹的时候Vue会自动的构建动画流程 也就是自动的在某个时间节点添加/删除对应的CSS类名 Vue其实提供了6个对应的类名 ，如上图所示。
复制代码

可能关于动画有些抽象，下面搜集了几张助于理解的图片：工具

咱们假设黑色横线做为动画的整个流程红点为动画开始的瞬间：动画

动画进入:网站

一、当一个元素被transition包裹以后，Vue会自动分析元素的CSS样式，而且构建一个动画的流程。那么当咱们用标签包裹了元素/组件的时候 Vue会在动画即将开始还没开始的时候添加两个CSS类名分别是v-enter/v-enter-toui

三、而后，当动画即将被执行的这一瞬间：会往div上增长两个class，分别vv是v-enter和v-enter-active。当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的v-enter那个class，而后添加v-enter-to这个class。而v-enter-active这个class会一直存在于整个动画过程当中直到动画结束的时候。

四、当动画执行的最后的一瞬间：Vue会把v-enter-active和v-enter-to去除掉。

上面咱们讲了假如一个元素从隐藏到显示的动画，如今咱们讲一下从显示到隐藏，和上面的图差很少，可是class名字变了：

动画离开：

一、当一个元素被transition包裹以后，Vue会自动分析元素的CSS样式，而且构建一个动画的流程。那么当咱们用标签包裹了元素/组件的时候 Vue会在动画即将开始还没开始的时候添加两个CSS类名分别是v-leave/v-leave-to

三、而后，当动画即将被执行的这一瞬间：会往div上增长两个class，分别vv是v-leave和v-leave-active。当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的v-leave那个class，而后添加v-leave-to这个class。而v-leave-active这个class会一直存在于整个动画过程当中直到动画结束的时候.

四、当动画执行的最后的一瞬间：Vue会把v-leave-active和v-leave-to去除掉。

过渡动画总结：

结论一：因此说fade-enter-active和fade-leave-active这两个class实际上是贯穿于整个动画，因此在这里添加过渡动画或者监听的属性。而另外四个属性相对于来讲就是在某个时间点作出的被监听的动画属性的改变。

结论二：v-enter-to和v-leave的状态是同样的。并且通常来讲，v-enter和v-leave-to的状态也是一致的。因此，咱们能够把这四个状态写成两组。

也就是说：Vue的动画就是在某个时间去往元素上添加动画相关的class来实现的。

过渡类动画小demo

下面经过Vue的过渡类名来实现几个小demo：

<style>
  /* 盒子样式 */
       /* 盒子样式 */
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }

        /* 第一个盒子的效果 */
        /* tran1-enter-active入场动画的时间段  tran1-leave-active离场动画的时间段 */
        .tran1-enter-active, .tran1-leave-active {
            transition: opacity 1s;/*期间，设置过渡的属性：all表示全部的属性、时间为1秒、过渡的状态*/
        }
        /* 显示前或隐藏后的效果 */
        /* tran1-enter 这是一个时间点，是进入以前元素的起始状态，此时尚未进入  */
        /* tran1-leave-to  是动画离开以后，离开的终止状态，此时元素动画已经结束 */
        .tran1-enter,.tran1-leave-to {
            opacity: 0; /* 都是隐藏效果 */
        }


         /* 第二个盒子的效果 */
        /* 显示过渡效果 */
        .tran2-enter-active {
            transition: all 1s ease;
        }
        /* 隐藏过渡效果 */
        .tran2-leave-active {
            transition: all 1s ease;
        }
        /* 显示前或隐藏后的效果 */
        .tran2-enter, .tran2-leave-to {
            opacity: 0;
            transform: translateX(10px);/* 水平方向右移10px  tran2-enter 一开始让DOM元素处于靠右10px的位置 */ 
        }
</style>
<body>
     <!-- 过渡效果和动画效果都须要用transition标签包住 -->
    <!-- transition 元素，是 Vue 官方提供的 -->
    <!-- 过渡效果 -->
    <div id="tran1">
        <button @click="show = !show">渐变过渡</button>
        <transition name="tran1" mode="">
            <div class="box" v-if = "show"></div>
        </transition>
    </div>
    <br>
    <div id="tran2">
        <button @click="show = !show">渐变平滑过渡</button>
        <transition name="tran2" mode="">
            <div class="box" v-if="show"></div>
        </transition>
    </div>
</body>

<script>
        let vm1 = new Vue({
            el: '#tran1',
            data: {
                show: true,
            }
        })
        let vm2 = new Vue({
            el: '#tran2',
            data: {
                show: true,
            }
        })
            </script>
复制代码

自定义过渡的类名

也就是修改过渡类名的前缀

在上一小段中，.v-enter、.v-leave-to这些过渡类名都是以v-开头的。这样作，会有一个局限性：假设有两个DOM元素都用transition进行了包裹，那这两个DOM元素就都具有了v-中所定义的动画。

那若是咱们想把两个DOM元素的动画进行分开定义，该怎么作呢？这里，咱们能够经过修改过渡类名的前缀来作。好比：

一、自定义别名

<transition name="my">
      <h6 v-if="flag2">这是一个H6</h6>
    </transition>
复制代码

上方代码中，咱们加了name="my"。

2.使用别名（咱们就可使用 .my-enter、.my-leave-to这些类名了）

.my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

复制代码

css动画：Animate.css库

二、在Vue中使用Animate.css库

<style>
        /* 动画效果 */
        .anim1-enter-active {
            animation: bounce-in 1s;
        }
        .anim1-leave-active {
            animation: bounce-in 3s reverse;
        }
        /* @keyframes自定义动画效果，而后能够被引用 */
        @keyframes bounce-in {
            /* 若总共持续1秒，则0%表示0秒，50%表示0.5秒，100%表示1秒 */
            0% { transform: scale(0); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }
</style>
<body>
            <!-- 动画效果 -->
    <div id="anim1">
        <button @click="show = !show">放大缩小动画</button>
        <br>
        <transition name='anim1'>
            <div class="box" v-if="show"></div>
        </transition>
    </div>
    </body>
<script>
            let vm3 = new Vue({
            el: '#anim1',
            data: {
                show: true,
            }
        })

</script>

复制代码

二、那么咱们有了transition这个标签后，咱们必定要使用fade-enter-active或者fade-leave-active这样的选择器名称么？不是咱们还有下面这样的一个选择器能够多处使用的的方法：选择器正常命名，在transition标签中去书写enter-active-class和leave-active-class等属性

/* 动画效果2 */
        .active {  /* 正常命名*/
            animation: bounce-in 1s;
        }

        .leave {/* 正常命名*/
            animation: bounce-in 3s reverse;
        }

        /* @keyframes自定义动画效果，而后能够被引用 */
          @keyframes bounce-in {
            /* 若总共持续1秒，则0%表示0秒，50%表示0.5秒，100%表示1秒 */
            0% { transform: scale(0); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }

         <div id="anim1">
        <button @click="show = !show">放大缩小动画2</button>
        <br>
        <!--给transition添加enter-active-class和leave-active-class两个属性，并与CSS选择器绑定-->
        <transition enter-active-class="active" leave-active-class="leave">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

复制代码

使用Animate.css

三、有了上面这个transition标签上使用动画class与正常css样式绑定的方法，咱们就能使用Animate.css库了,去官网下载这个库，咱们就能直接使用上面的动画效果，不用本身写了。官方网站：daneden.github.io/animate.css…

<link rel="stylesheet" href="./am.css">

    <div id="anim1">
        <button @click="show = !show">放大缩小动画3</button>
        <br>
        <!--给transition添加enter-active-class和leave-active-class两个属性，并与CSS选择器绑定-->
        <transition enter-active-class="animated swing" leave-active-class="animated shake">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

复制代码

使用animate.css注意事项：

上面的代码中，咱们使用animate.css提供的bounceIn、bounceOut这两个类来作入场、离场的动画. 注意1：enter-active-class和leave-active-class这两个类名是Vue动画里的关键词，不能写成本身随意起的类名。

注意2: bounceIn、bounceOut这两个类不能直接使用，要在前面加上animated这个类；不然动画是不会生效的。固然，上面的代码中，咱们还能够把class = animated这个代码移到h3标签里，效果是同样的，以下：

<transition enter-active-class="swing" leave-active-class=" shake" :duration="{ enter: 1000, leave: 300 }> <div class="box" v-if="show" class="animated"></div> </transition> 复制代码

若是咱们想给入场、出场动画设置持续的时间，可使用:duration来作。

使用 :duration="毫秒值" 来统一设置入场和离场时候的动画时长使用 :duration="{ enter: 1000, leave: 300 }" 来分别设置入场的时长和离场的时长

总之vue过渡和动画，官网里面还有不少东西，这里先写到这了把，后面有空了再回来接续更新。

参考文章：

www.pianshen.com/article/267…

www.hehaibao.com/vue-animati…