VueJS过渡和动画(transition & animation)使用详细教程

在上一节中,我们学习了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秒内消失,再次点击逐渐显示:
【VueJS过渡和动画(transition & animation)使用详细教程】下面看另一个例子,其中有一个图片,当点击按钮时它会在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 = "http://www.srcmini.com/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过渡和动画(transition &#038; animation)使用详细教程

文章图片
点击按钮后,图片往右边移动,如下图所示:
VueJS过渡和动画(transition &#038; animation)使用详细教程

文章图片
二、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="http://www.srcmini.com/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="http://www.srcmini.com/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过渡和动画(transition &#038; animation)使用详细教程

文章图片
三、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="http://img.readke.com/220411/091K5J26-5.jpg">< /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过渡和动画(transition &#038; animation)使用详细教程

文章图片
VueJS过渡和动画(transition &#038; animation)使用详细教程

文章图片
上面的代码中实现了两个动画,一个是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="http://img.readke.com/220411/091K54353-8.jpg">< /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过渡和动画(transition &#038; animation)使用详细教程

文章图片
在上面的例子中,我们使用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过渡和动画(transition &#038; animation)使用详细教程

文章图片
七、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>

VueJS过渡和动画(transition &#038; animation)使用详细教程

文章图片

    推荐阅读