简单的vue动画效果

最新推荐文章于 2024-04-29 03:31:56 发布

chijiajing

最新推荐文章于 2024-04-29 03:31:56 发布

阅读量1.1k

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/chijiajing/article/details/89177826

版权

学习专栏收录该内容

96 篇文章 0 订阅

订阅专栏

显示、隐藏动画效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
	<style type="text/css">
		/* 显示动画效果 */
		.v-enter{
			opacity: 0
		}
		.v-enter-active{
			transition: opacity 3s;
		}
		/* 隐藏动画效果 */
		.v-leave-to{
			opacity: 0;
		}
		.v-leave-active{
			transition: opacity 3s;
		}
	</style>
</head>
<body>
	<div id="root">
		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除)，transition标签没有name属性则默认为样式名以v开头，若有如name是tran的则样式为tran-enter，tran-enter-active -->
		<transition>
		<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#root",
			data:{
				show:false
			},
			methods:{
				handleClick:function(){
					this.show=!this.show;
				}
			}
		})
	</script>
</body>
</html>

css3　＠ｋｅｙｆｒａｍｅ写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<style>
		/* 过渡动画效果(缩小放大) */
		@keyframes bounce-in {
			0% {
				transform: scale(0);
			}
			50% {
				transform: scale(1.5);
			}
			100% {
				transform: scale(1);
			}
		}
		.fade-enter-active{
			transform-origin: left center;
			animation:bounce-in 1s;
		}
		.fade-leave-active{
			transform-origin: left center;
			animation: bounce-in 1s reverse;
		}
	</style>
</head>
<body>
	<div id="root">
		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除)，transition标签没有name属性则默认为样式名以v开头，若有如name是tran的则样式为tran-enter，tran-enter-active -->
		<transition name="fade">
		<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm=new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleClick:function(){
					this.show=!this.show;
				}
			}
		})
	</script>
</body>
</html>

第二种可以指定ｃｓｓ名字

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<style>
		/* 过渡动画效果(缩小放大) */
		@keyframes bounce-in {
			0% {
				transform: scale(0);
			}
			50% {
				transform: scale(1.5);
			}
			100% {
				transform: scale(1);
			}
		}
		.active{
			transform-origin: left center;
			animation:bounce-in 1s;
		}
		.leave{
			transform-origin: left center;
			animation: bounce-in 1s reverse;
		}
	</style>
</head>
<body>
	<div id="root">
		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除)，transition标签没有name属性则默认为样式名以v开头，若有如name是tran的则样式为tran-enter，tran-enter-active -->
		<transition name="fade"
		enter-active-class="active"
		leave-active-class="leave"
		>
		<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm=new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleClick:function(){
					this.show=!this.show;
				}
			}
		})
	</script>
</body>
</html>

引用ａｎｉｍａｔｅ．ｃｓｓ封装样式

第一次载入页面也自带动画效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
	<div id="root">
		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除)，transition标签没有name属性则默认为样式名以v开头，若有如name是tran的则样式为tran-enter，tran-enter-active -->
		<!-- 第一次页面载入也有动画效果只要加appear属性就行了 -->
		<transition name="fade"
		appear
		enter-active-class="animated swing"
		leave-active-class="animated shake"
		appear-active-class="animated swing"
		>
		<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm=new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleClick:function(){
					this.show=!this.show;
				}
			}
		})
	</script>
</body>
</html>

过渡效果和动画效果混合写法（其实也就是把上面的效果写在一起而已）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="./animate.css">
	<style>
		.fade-enter, .fade-leave-to{
			opacity: 0;
		}
		.fade-enter-active, .fade-leave-active{
			transition :opacity 3s;
		}
	</style>
</head>
<body>
	<div id="root">
		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除)，transition标签没有name属性则默认为样式名以v开头，若有如name是tran的则样式为tran-enter，tran-enter-active -->
		<!-- 第一次页面载入也有动画效果只要加appear属性就行了 -->
		<transition name="fade"
		appear
		enter-active-class="animated swing fade-enter-active"
		leave-active-class="animated shake fade-leave-active"
		appear-active-class="animated swing"
		>
		<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm=new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleClick:function(){
					this.show=!this.show;
				}
			}
		})
	</script>
</body>
</html>

若过渡效果跟动画时长不一致，可以添加一个ｔｙｐｅ属性如

<transition
		type="transition" 
		name="fade"
		appear
		enter-active-class="animated swing fade-enter-active"
		leave-active-class="animated shake fade-leave-active"
		appear-active-class="animated swing"
		>

这样即可已上面的ｔｒａｎｓｉｔｉｏｎ定义的时间来做规范了

引用Ｖｅｌｏｃｉｔｙ．ｊｓ

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<script src="./Velocity.js"></script>
</head>
<body>
	<div id="root">
		<!-- 被transition标签包裹的元素会有动画效果(自动会添加css样式以及删除)，transition标签没有name属性则默认为样式名以v开头，若有如name是tran的则样式为tran-enter，tran-enter-active -->
		<!-- 第一次页面载入也有动画效果只要加appear属性就行了 -->
		<transition
		name="fade"
		@before-enter="handleBeforeEnter"
		@enter="handleEnter"
		@after-enter="handleAfterEnter"
		>
		<div v-if="show">hello world</div>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		var vm=new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleClick:function(){
					this.show=!this.show;
				},
				/*vue内js的钩子函数*/
				handleBeforeEnter:function(el){
					el.style.opacity=0;
				},
				handleEnter:function(el,done){
					/*el是对应绑定的元素*/
					Velocity(el,{opacity:1},{duration:1000,complete:done});
					/*done是类似与filter内的dofilter方法*/
					
				},
				handleAfterEnter:function(el){
					console.log("动画结束");
				}
			}
		})
	</script>
</body>
</html>

多个组件中动态效果过渡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<style type="text/css">
		/* 这是vue中自动绑定的css样式引用 */
		.v-enter,.v-leave-to{
			opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			transition:opacity 1s;
		}
	</style>
</head>
<body>
	<div id="root">
		<!-- mode="out-in"是代表元素显示顺序为先出后进 -->
		<transition mode="out-in">
			<component :is="type"></component>
		</transition>
		<button @click="handleClick">toggle</button>
	</div>
	<script>
		//vue动态组件
		Vue.component('child',{
			template:"<div>child</div>"
		})
		Vue.component('child-one',{
			template:"<div>child-one</div>"
		})
		var vm=new Vue({
			el:"#root",
			data:{
				type:'child'
			},
			methods:{
				handleClick:function(){
					this.type = this.type === 'child' ? 'child-one' : 'child'
				}
			}
		})
	</script>
</body>
</html>

Vue中列表的过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue中列表的过渡效果</title>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<style type="text/css">
		/* 这是vue中自动绑定的css样式引用 */
		.v-enter,.v-leave-to{
			opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			transition:opacity 1s;
		}
	</style>
</head>
<body>
	<div id="root">
		<!-- mode="out-in"是代表元素显示顺序为先出后进 -->
		<transition-group>
			<div v-for="item of list" :key="item.id">
				{{item.title}}
			</div>
		</transition-group>
		<button @click="handleClick">add</button>
	</div>
	<script>
		var count=0;
		var vm=new Vue({
			el:"#root",
			data:{
				list:[]
			},
			methods:{
				handleClick:function(){
					this.list.push({
						id:count++,
						title:"hello World"
					})
				}
			}
		})
	</script>
</body>
</html>

chijiajing

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的vue动画效果

显示、隐藏动画效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"&...
复制链接

扫一扫