关于Vue动画基本使用原理见下图：
现在利用语法1（css版）做一个简单的动画效果，其中translate是移动动画效果，scale是缩放动画效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
<style>
div{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color:aliceblue;
border-radius: 50%;
background: cadetblue;
margin: 50px;
transition: all 2s;
}
.dh-transition{
opacity: 1;
transform:translate(0px) scale(1.6);
-webkit-transition:translate(0px) scale(1.6);
}
.dh-leave{
opacity: 0;
transform:translateX(90px) scale(1.1) ;
-webkit-transform:translateX(90px) scale(1.1);
background: darkseagreen;
}
.dh-enter{
opacity: 1;
transform:translateY(90px) scale(1.1);
-webkit-transform:translateY(90px) scale(1.1);
background: silver;
}
</style>
</head>
<body>
<button @click="add">点击动画效果</button>
<div transition="dh" v-show="show">我是个调皮的圆</div>
<script>
new Vue({
el:"body",
data:{
show:true
},
methods:{
add:function(){
this.show=!this.show
}
}
})
</script>
</body>
</html>
效果图如下（因为是动图，所以这样看效果时间有点快，还有这画质有点感人呀，果然是个调皮的圆，喜欢的可以尝试下做其他的动画效果感受下）：
然后语法2（vue.js版）,我引用了animate.css插件，稍微感受一下来自animate.css插件使用感，简单的介绍它吧，animate.css是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。插件可以到github上去下载，里面预设了很多种常用的动画，然后可以在https://daneden.github.io/animate.css/网站查看各种动画的演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了（当然最重要的是不要忘记引用下载好的插件文件啦）。
代码奉上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/animate.min.css" />
<script type="text/javascript" src="js/vue.min.js" ></script>
<style>
div{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color:aliceblue;
border-radius: 50%;
background: cadetblue;
margin: 50px;
}
.dh-transition{
background: darkseagreen;
}
</style>
</head>
<body>
<button @click="add">点击动画效果</button>
<div transition="dh" v-show="show" class="animated">我是个调皮的圆</div>
<script>
new Vue({
el:"body",
data:{
show:true
},
methods:{
add:function(){
this.show=!this.show;
}
},
transitions:{
dh:{
enterClass:"bounceInRight",
leaveClass:"jello"
}
}
})
</script>
</body>
</html>
其效果如下：
好了，今天就先分享到这吧，学无止境，自身还有很多不足的地方，望每天都是元气满满的一天，加油！
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
