Vue的动画使用

最新推荐文章于 2024-09-17 18:00:54 发布

candy755

最新推荐文章于 2024-09-17 18:00:54 发布

阅读量2.4k

点赞数 3

分类专栏： Vue 文章标签： Vue动画使用

本文链接：https://blog.csdn.net/candy755/article/details/82633062

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

其效果如下：