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 & 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自定义过渡动画类VueJS提供了一些自定义类，可以将其作为属性添加到过渡元素中：

enter-class
enter-active-class
leave-class
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>

文章图片

文章图片
上面的代码中实现了两个动画，一个是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>

文章图片
在上面的例子中，我们使用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在组件上应用动画我们可以使用以下代码封装组件的过渡动画，这里使用了动态组件。

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