在上一节中,我们学习了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动画(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
<
!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>
文章图片
推荐阅读
- VueJS自定义指令和过滤器用法详解
- VueJS渲染指令v-for、v-if、v-else、v-show用法详解
- VueJS事件处理v-on用法全解
- Python字典(Dictionary)完全解读和用法详解
- jQuery 带有示例的detach()用法代码
- 算法库(C++魔术师STL算法用法示例)
- 文件处理(如何在Python中读取文件())
- 算法设计(通过最多买卖k次股票获得最大利润)
- TypeScript中的变量编程介绍