当前位置： 正文

VueJS过渡和动画（transition & animation）使用详细教程

03-19 前端/HTML/CSS 222

在上一节中，我们学习了VueJS渲染指令的用法，例如v-for、v-if、v-else、v-show等，这些渲染指令是我们开发中经常使用到的，特别是v-for。本节将讨论VueJS过渡和动画（transition & animation）特性的用法。

一、VueJS过渡（transition）的定义和使用

当在DOM中添加/更新HTML元素时，你可以使用VueJS的过渡，将其应用到这些元素上。VueJS有一个内置的过渡组件，需要将其封装在需要过渡的元素周围。

使用语法如下：

<transition name="过渡的名称">
        <div></div>
    </transition>

下面我们看一个例子来理解过渡的用法和工作原理。

<style>
        .fade-enter-active, .fade-leave-active {
           transition: opacity 2s
        }
        .fade-enter, .fade-leave-to{
           opacity: 0
        }
     </style>
     <div id = "app">
        <button v-on:click = "show = !show">点击</button>
        <transition name = "fade">
           <p v-show = "show" v-bind:style = "styleobj">过渡动画例子</p>
        </transition>
     </div>
     <script type = "text/javascript">
        var app = new Vue({
           el: '#app',
           data: {
              show:true,
              styleobj :{
                 fontSize:'30px',
                 color:'red'
              }
           },
           methods : {
           }
        });
     </script>

在上面的代码中有一个点击按钮，我们可以用它来将变量show的值设置为true或false。只有在变量为true时才显示文本元素的p标记，如下代码段所示的过渡元素包装了p标签。

<transition name = "fade">
           <p v-show = "show" v-bind:style = "styleobj">过渡动画例子</p>
        </transition>

过渡的名称是fade，VueJS提供了一些过渡的标准类，这些类的前缀使用过渡的名称。

下面是一些过渡的标准类：

1、v-enter – 这个类是在元素更新/添加之前进行初始化调用，这是初始状态。

2、v-enter-active – 这个类用于定义进入过渡阶段的延迟、持续时间和缓和曲线。这是整个的活动状态，类在整个进入阶段都是可用的。

3、v-leave – 当离开过渡触发时，添加和移除。

4、v-leave-active – 离开阶段使用，在过渡时被删除。该类用于在离开阶段应用延迟、持续时间和缓和曲线。

上面的每个类都将以过渡的名称作为前缀，将过渡的名称设为fade，这样类的名称变为.fade_enter、.fade_enter_active、.fade_leave、.fade_leave_active。

它们的定义在以下代码中：

.fade-enter-active, .fade-leave-active {
           transition: opacity 2s
        }
        .fade-enter, .fade-leave-to{
           opacity: 0
        }

.fade_enter_active和.fade_leave_active一起被定义，它在开始和结束阶段应用一个过渡，不透明度属性在2秒内更改为0。

持续时间在.fade_enter_active和.fade_leave_active中被定义，最后一个阶段在.fade_enter和.fade_leave_to中定义。

下面是以上代码中浏览器中的显示情况，点击按钮，文本会在2秒内消失，再次点击逐渐显示：

下面看另一个例子，其中有一个图片，当点击按钮时它会在x轴上移动。

 <style>
        .shiftx-enter-active, .shiftx-leave-active {
           transition: all 2s ease-in-out;
        }
        .shiftx-enter, .shiftx-leave-to {
           transform :  translateX(100px);
        }
     </style>
     <div id = "app">
        <button v-on:click = "show = !show">点击</button>
        <transition name = "shiftx">
           <p v-show = "show">
              <img src = "img/reading.jpg" style = "width:100px;" />
           </p>
        </transition>
     </div>
     <script type = "text/javascript">
        var app = new Vue({
           el: '#app',
           data: {
              show:true
           },
           methods : {
           }
        });
     </script>

其中过渡的名称定义shiftx，transform属性用于将图片在x轴上移动100px，如下代码：

<style>
        .shiftx-enter-active, .shiftx-leave-active {
           transition: all 2s ease-in-out;
        }
        .shiftx-enter, .shiftx-leave-to {
           transform :  translateX(100px);
        }
     </style>
VueJS定义移动过渡动画

点击按钮后，图片往右边移动，如下图所示：

VueJS移动过渡动画使用

二、VueJS动画（animation）定义和使用

动画应用的方式和过渡的方式相同，动画animation也有一些类需要声明才能产生效果。

下面看一个例子，看看VueJS动画是如何使用的。

 <style>
        .shiftx-enter-active {
            animation: shift-in 2s;
        }

        .shiftx-leave-active {
            animation: shift-in 2s reverse;
        }

        @keyframes shift-in {
            0% {
                transform: rotateX(0deg);
            }

            25% {
                transform: rotateX(90deg);
            }

            50% {
                transform: rotateX(120deg);
            }

            75% {
                transform: rotateX(180deg);
            }

            100% {
                transform: rotateX(360deg);
            }
        }
    </style>
    <div id="app">
        <button v-on:click="show = !show">点击</button>
        <transition name="shiftx">
            <p v-show="show">
                <img src="img/reading.jpg" style="width:100px;" />
            </p>
        </transition>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                show: true
            },
            methods: {
            }
        });
    </script>

要使用动画，可以使用和过渡transition相同的类。在上面的代码中，我们有一个包含在p标签中的图像，如下面的代码所示。

<transition name="shiftx">
            <p v-show="show">
                <img src="img/reading.jpg" style="width:100px;" />
            </p>
        </transition>

过渡的名称是shiftx，使用的类如下：

<style>
        .shiftx-enter-active {
            animation: shift-in 2s;
        }

        .shiftx-leave-active {
            animation: shift-in 2s reverse;
        }

        @keyframes shift-in {
            0% {
                transform: rotateX(0deg);
            }

            25% {
                transform: rotateX(90deg);
            }

            50% {
                transform: rotateX(120deg);
            }

            75% {
                transform: rotateX(180deg);
            }

            100% {
                transform: rotateX(360deg);
            }
        }
    </style>

该类的前缀是过渡名，即.shiftx-enter-active和.shiftx-leave-active，前缀为shiftx。动画是使用关键帧从0%到100%定义的，每个关键帧都定义了一个过渡，如下面的代码段所示。

@keyframes shift-in {
            0% {
                transform: rotateX(0deg);
            }

            25% {
                transform: rotateX(90deg);
            }

            50% {
                transform: rotateX(120deg);
            }

            75% {
                transform: rotateX(180deg);
            }

            100% {
                transform: rotateX(360deg);
            }
        }

下面是动画在浏览器的显示效果：

VueJS动画显示效果

三、VueJS自定义过渡动画类

VueJS提供了一些自定义类，可以将其作为属性添加到过渡元素中：

  1. enter-class
  2. enter-active-class
  3. leave-class
  4. leave-active-class

当我们想要使用外部的CSS库(如animation.css)时，自定义类就会发挥作用了。

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS过渡和动画用法详解</title>
    <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="animate" style="text-align:center">
        <button @click="show = !show"><span style="font-size:25px;">点击演示动画</span></button>
        <transition name="custom-classes-transition" enter-active-class="animated swing"
            leave-active-class="animated bounceIn">
            <p v-if="show"><span style="font-size:25px;">La Oreja De Van Gogh</span></p>
        </transition>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#animate',
            data: {
                show: true
            }
        });
    </script>
</body>

</html>
VueJS自定义过渡动画
VueJS自定义过渡动画显示效果

上面的代码中实现了两个动画，一个是enter-active-class，另一个是leave-active-class，你可以使用上面的代码亲自试下效果，以上就是使用自定义动画类来应用第三方库中的动画。

四、VueJS动画过渡时间

我们可以使用VueJS在元素上应用转换和动画，Vue等待transionend和animationend事件来检测是否完成了动画或转换。

有时过渡会延迟，在这种情况下，我们可以像下面这样显式地应用持续时间。

<transition :duration="1000"></transition>
    <transition :duration="{ enter: 500, leave: 800 }">...</transition>

我们可以在上面显示的转换元素上使用:duration属性，如果需要分别指定进入和离开的时间，可以按照上面的代码段进行操作。

五、JavaScript钩子函数

可以使用JavaScript事件将转换类作为方法调用，下面看一个例子加以理解。

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    <div id="app">
        <button @click="show = !show">
            <span style="font-size:25px;">切换</span>
        </button>
        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
            <p v-if="show" style="font-size:25px;">使用velocity的动画例子</p>
        </transition>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                show: false
            },
            methods: {
                beforeEnter: function (el) {
                    el.style.opacity = 0
                },
                enter: function (el, done) {
                    Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                    Velocity(el, { fontSize: '10px' }, { complete: done })
                },
                leave: function (el, done) {
                    Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                    Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                    Velocity(el, {
                        rotateZ: '45deg',
                        translateY: '30px',
                        translateX: '30px',
                        opacity: 0
                    }, { complete: done })
                }
            }
        });
    </script>
VueJS使用JS方法执行动画

在上面的例子中，我们使用js方法在过渡元素上执行动画，关于过渡的方法应用如下

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
            <p v-if="show" style="font-size:25px;">使用velocity的动画例子</p>
        </transition>

上面有前缀为v-on的事件名称，这些都是被调用的方法，这些方法在Vue实例中有定义。

每个方法都应用了对应的过渡，在按钮的点击时，以及当动画完成，有一个不透明的动画。其中使用到的第三方库用于动画，在transition的v-bind上添加了一个属性:css = “false”，这样做是为了让Vue知道这是一个JavaScript转换。

六、VueJS初始渲染时的过渡

为了在开始时添加动画，我们需要向transition元素添加appear属性，让我们看一个例子来更好地理解它。

 <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <div id="animate" style="text-align:center">
        <transition appear appear-class="custom-appear-class" appear-active-class="animated bounceIn">
            <h1>BounceIn - 动画例子</h1>
        </transition>
        <transition appear appear-class="custom-appear-class" appear-active-class="animated swing">
            <h1>Swing - 动画例子</h1>
        </transition>
        <transition appear appear-class="custom-appear-class" appear-active-class="animated rubberBand">
            <h1>RubberBand - 动画例子</h1>
        </transition>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#animate',
            data: {
                show: true
            }
        });
    </script>
VueJS初始渲染的过渡例子

七、VueJS在组件上应用动画

我们可以使用以下代码封装组件的过渡动画，这里使用了动态组件。

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <div id="app" style="text-align:center;">
        <transition appear appear-class="custom-appear-class" appear-active-class="animated wobble">
            <component v-bind:is="view"></component>
        </transition>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                view: 'component1'
            },
            components: {
                'component1': {
                    template: '<div><span style = "font-size: 25; color: red; ">在组件上应用动画</span></div>'
                  }
            }
        });
    </script>
Vue在组件上应用动画
微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

如何在Google AMP的amp-carousel中添加灯箱效果？
前端/HTML/CSS

03-21 801
如何使用自己的logo创建自定义加载栏
前端/HTML/CSS

03-20 692
从服务器响应(请求)返回HTML，好的还是不好的做法？
前端/HTML/CSS

03-20 738
如何使用wkhtmltopdf在PDF上添加新页面
前端/HTML/CSS

03-20 737
如何在Dompdf中将图像与表格单元格的底部对齐
前端/HTML/CSS

03-20 671
Init.js：关于为什么和如何使用全栈JavaScript的指南
前端/HTML/CSS

03-20 751
没有账号？ 忘记密码？