动画
在平常我们做项目的过程中,网页动画效果是我们经常要碰到的需求,在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){ 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>
|
至此我们通过三种方法实现了简单的动画效果