Vue.js旅程(四)

动画

在平常我们做项目的过程中,网页动画效果是我们经常要碰到的需求,在Vue中我们该如何完成到动画需求呢?

实现动画的三种方式

通过css控制动画效果

这种是最简单的控制动画效果的方法,因为没有调用到复杂的方法,所以使用起来还是很容易的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.show-transition{
transition:all .5s ease;
padding-left: 0px;
}
.show-enter, .show-leave{
padding-left: 100px;
}
</style>
</head>
<body>
<div id="app">
<button @click='toggle'>展示/隐藏</button>
<div v-show='isShow' transition='show'>
hello Vue.js
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
isShow:false;
}
methods:{
toggle:function(){
this.isShow = !isShow;
}
},
transitions:{
'show':{
enterClass:'fadeInRight',
leaveClass:'fadeOutRight'
}
}
})
</script>
</body>
</html>

配合animate.css来实现动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="app">
<button @click='toggle'>显示/隐藏</button>
<div v-show='isShow' class='animated' transition='show'>
hello Vue.js
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
isShow:fasle
},
methods:{
toggle:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>

过度的钩子函数实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='toggle'>显示/隐藏</button>
<div v-show = 'isShow' transition='show'>
Hello Vue.js
</div>
</div>
<script>
Vue.transition('show',{
beforeEnter:function(el){
//控制动画的进入准备
//给应用了这个动画的元素添加transform属性
el.style.transform = 'translate(100px,0)';
},
enter:function(el){
//保证动画的实时刷新
var oh = el.offsetHeigh;
this.$nextTick(function(){
el.style.transform = 'translate(0,0)';
})
},
afterEnter:function(){
//动画完成后的逻辑
}
})
new Vue({
el:'#app',
data:{
isShow:false
},
methods:{
toggle:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>

至此我们通过三种方法实现了简单的动画效果

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 动画
    1. 1.1. 实现动画的三种方式
      1. 1.1.1. 通过css控制动画效果
      2. 1.1.2. 配合animate.css来实现动画
    2. 1.2. 过度的钩子函数实现