VueJS过渡和动画

在本章中，我们将讨论VueJS中可用的过渡和动画功能。

过渡

当在DOM中添加/更新HTML元素时，VueJS提供了各种方法来将过渡应用于HTML元素。 VueJS具有内置的过渡组件，需要将其包装在需要过渡的元素周围。

语法 

<transition name = "nameoftransition">
    <div></div>
</transition>

让我们考虑一个示例，以了解过渡的工作原理。 

<html>
    <head>
        <title>VueJs Instance</title>
        <script type = "text/javascript" src = "js/vue.js"></script>
    </head>
    <body>
        <style>
            .fade-enter-active, .fade-leave-active {
                transition: opacity 2s
            }
            .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
                opacity: 0
            }
        </style>
        <div id = "databinding">
            <button v-on:click = "show = !show">Click Me</button>
            <transition name = "fade">
                <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
            </transition>
        </div>
        <script type = "text/javascript">
            var vm = new Vue({
                el: '#databinding',
                data: {
                    show:true,
                    styleobj :{
                        fontSize:'30px',
                        color:'red'
                    }
                },
                methods : {
                }
            });
        </script>
    </body>
</html>

创建了一个名为clickme的按钮，使用该按钮可以将变量show的值从true更改为false，反之亦然。有一个 p tag 仅当变量为true时才显示文本元素。我们已经用过渡元素包装了p标签，如下面的代码所示。 

<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>

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

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

  • v-enter ：在元素被更新/添加之前，最初会调用此类。它的起始状态。

  • 主动 ：此类用于定义进入过渡阶段的延迟，持续时间和缓动曲线。这是整个活动状态，并且在整个进入阶段都可以使用该类。

  • v-leave ：触发​​离开过渡时添加，删除。

  • 主动离开 ：在离开阶段使用。过渡完成后将其删除。此类用于在离开阶段应用延迟，持续时间和缓动曲线。

以上每个类都将以过渡名称作为前缀。我们将过渡的名称设置为淡入淡出，因此类的名称变为 .fade_enter，.fade_enter_active，.fade_leave，.fade_leave_active .

它们在以下代码中定义。 

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0
    }
</style>

.fade_enter_active和.fade_leave_active一起定义，并且在开始和离开阶段应用过渡。 opacity属性在2秒内更改为0。

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

浏览器中的显示如下。

Vue Transition

单击该按钮，文本将在两秒钟内消失。

Fade

两秒钟后，文本将完全消失。

让我们考虑另一个示例，其中有一个图像，并且在单击按钮时它在x轴上移动。 

<html>
    <head>
        <title>VueJs Instance</title>
        <script type = "text/javascript" src = "js/vue.js"></script>
    </head>
    <body>
        <style>
            .shiftx-enter-active, .shiftx-leave-active {
                transition: all 2s ease-in-out;
            }
            .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
                transform :  translateX(100px);
            }
        </style>
        <div id = "databinding">
            <button v-on:click = "show = !show">Click Me</button>
            <transition name = "shiftx">
                <p v-show = "show">
                    <img src = "images/img.jpg" style = "width:100px;height:100px;" />
                </p>
            </transition>
        </div>
        <script type = "text/javascript">
            var vm = new Vue({
                el: '#databinding',
                data: {
                    show:true
                },
                methods : {
                }
            });
        </script>
    </body>
</html>

过渡的名称是 shiftx 。使用以下代码段，可以使用transform属性将x轴上的图像移动100px。 

<style>
    .shiftx-enter-active, .shiftx-leave-active {
        transition: all 2s ease-in-out;
    }
    .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
        transform :  translateX(100px);
    }
</style>

以下是输出。

Shiftx

单击按钮后，图像将向右移动100px，如以下屏幕截图所示。

Image Right

动画片

动画的应用与完成过渡的方式相同。动画还具有需要声明的类才能产生效果。

让我们考虑一个示例，以查看动画的工作原理。 

<html>
    <head>
        <title>VueJs Instance</title>
        <script type = "text/javascript" src = "js/vue.js"></script>
    </head>
    <body>
        <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 = "databinding">
            <button v-on:click = "show = !show">Click Me</button>
            <transition name = "shiftx">
                <p v-show = "show">
                    <img src = "images/img.jpg" style = "width:100px;height:100px;" />
                </p>
            </transition>
        </div>
        <script type = "text/javascript">
            var vm = new Vue({
                el: '#databinding',
                data: {
                    show:true
                },
                methods : {
                }
            });
        </script>
    </body>
</html>

要应用动画，有与过渡相同的类。在上面的代码中，我们在p标记中包含了一个图像，如以下代码所示。 

<transition name = "shiftx">
    <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height: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。动画是使用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);}
}

以下是输出。

Animation

单击该按钮时，它会从0旋转到360度，然后消失。

Change Degree

自定义过渡类

VueJS提供了一系列自定义类，可以将它们作为属性添加到过渡元素中。

  • 进阶
  • 主动活动班
  • 休假
  • 休假班

当我们想使用外部CSS库(例如animate.css)时，自定义类基本上会发挥作用。 

<html>
    <head>
        <link href = "https:// cdn.jsdelivr.net/npm/animate.css@3.5.1“ rel =” stylesheet“ type =” text / css“>
        <script type = "text/javascript" src = "js/vue.js"></script>
    </head>
    <body>
        <div id = "animate" style = "text-align:center">
            <button @click = "show = !show"><span style = "font-size:25px;">Animate</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;">Example</span></p>
            </transition>
        </div>
        <script type = "text/javascript">
            var vm =  new Vue({
                el: '#animate',
                data: {
                    show: true
                }
            });
        </script>
    </body>
</html>
Animated Swing Animated BounceIn

上面的代码中应用了两个动​​画。一个enter-active-class =“动画挥杆”，另一个leave-active-class =“动画bounceIn”。我们正在将自定义动画类用于要从第三方库中应用的动画。

显式过渡持续时间

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

有时过渡可能会导致延迟。在这种情况下，我们可以如下明确地应用持续时间。 

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

我们可以将duration属性与过渡元素上的：一起使用，如上所示。如果需要分别指定进入和离开的持续时间，可以按照上面的代码所示进行。

JavaScript挂钩

可以将过渡类称为使用JavaScript事件的方法。让我们考虑一个更好理解的例子。 

<html>
    <head>
        <title>VueJs Instance</title>
        <script type = "text/javascript" src = "js/vue.js"></script>
    </head>
    <body>
        <script src = "https:// cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js“> 
        <div id = "example-4">
            <button @click = "show = !show">
                <span style = "font-size:25px;">Toggle</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;">Animation Example with velocity</p>
            </transition>
        </div>
        <script type = "text/javascript">
            var vm = new Vue({
                el: '#example-4',
                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>
    </body>
</html>
JavaScript Hooks

JsHooks

在上面的示例中，我们在过渡元素上使用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;">Animation Example with velocity</p>
</transition>

添加了前缀 v-on 以及调用该方法的事件的名称。这些方法在Vue实例中定义如下： 

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 })
    }
}

在每种方法中都将应用所需的转换。单击按钮时以及完成动画后，都会应用不透明度动画。第三方库用于动画。

在过渡v-bind：css =“ false”上添加了一个属性，这样做是为了使Vue理解这是一个JavaScript过渡。

初始渲染时的过渡

为了在开始时添加动画，我们需要在过渡元素中添加“ appear”属性。

让我们看一个例子，以更好地理解它。 

<html>
    <head>
        <link href = "https:// cdn.jsdelivr.net/npm/animate.css@3.5.1“ rel =” stylesheet“ type =” text / css“>
        <script type = "text/javascript" src = "js/vue.js"></script>
    </head>
    <body>
        <div id = "animate" style = "text-align:center">
            <transition
                appear
                appear-class = "custom-appear-class"
                appear-active-class = "animated bounceIn">
                <h1>BounceIn - Animation Example</h1>
            </transition>
            <transition
                appear
                appear-class = "custom-appear-class"
                appear-active-class = "animated swing">
                <h1>Swing - Animation Example</h1>
            </transition>
            <transition
                appear
                appear-class = "custom-appear-class"
                appear-active-class = "animated rubberBand">
                <h1>RubberBand - Animation Example</h1>
            </transition>
        </div>
        <script type = "text/javascript">
            var vm =  new Vue({
                el: '#animate',
                data: {
                    show: true
                }
            });
        </script>
    </body>
</html>

在上面的示例中，我们使用了animate.css库中的三种不同的动画。我们在过渡元素中添加了外观。

执行以上代码后，浏览器中将输出以下内容。

Different Animation

组件动画

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

<html>
    <head>
        <title>VueJs Instance</title>
        <script type = "text/javascript" src = "js/vue.js"></script>
        <link href = "https:// cdn.jsdelivr.net/npm/animate.css@3.5.1“ rel =” stylesheet“ type =” text / css“>
    </head>
    <body>
        <div id = "databinding" 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 vm = new Vue({
                el: '#databinding',
                data: {
                    view: 'component1'
                },
                components: {
                    'component1': {
                        template: '<div><span style = "font-
                        size:25;color:red;">Animation on Components</span></div>'
                    }
                }
            });
        </script>
    </body>
</html>
Animation on Component
< 上一篇（Vue.js 渲染）
下一篇（Vue.js 指令） >

声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利，请在一个月内通知我们（support@newbiego.com），我们会及时删除。

Copyright©小牛教程 2015-2021 粤ICP备15003982号