Vue的动画使用

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

其效果如下:

好了,今天就先分享到这吧,学无止境,自身还有很多不足的地方,望每天都是元气满满的一天,加油!

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值