Vue半场动画（添加到购物车）

最新推荐文章于 2024-08-07 16:12:37 发布

原创最新推荐文章于 2024-08-07 16:12:37 发布 · 716 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

29 篇文章

订阅专栏

博客主要围绕Vue动画展开，介绍了Vue默认动画样式，提及引用第三方库，阐述了用transition-group实现v-for列表渲染，还展示了使用Vue动画钩子函数实现半场动画的实例效果。

Vue默认动画样式

引用第三方库

transition-group实现v-for列表渲染

实例效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/Vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="animate.css"/>
		<style>
			.v-enter,.v-leave-to{
				opacity: 0;
				transform: translateX(100px);
			}
			.v-enter-active,.v-leave-active{
				transition: all 1s ease;
			}
			
			/*自加前缀name*/
			.my-enter,.my-leave-to{
				opacity: 0;
				transform: translateY(100px);
			}
			.my-enter-active,.my-leave-active{
				transition: all 1s ease;
			}
			
			ul{
				list-style-type: none;
			}
			li{
				border: 1px dotted gray;
				line-height: 35px;
				font-size: 20px;
				margin: 15px 0px;
				width: 100%;
				color: red;
			}
			li:hover{
				background-color: hotpink;
			}
			
			/*li标签渐变离场效果*/
			/*记住该写法*/
			.v-move{
				transition: all 1s;
			}
			.v-leave-active{
				position: absolute;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<!--默认v-绑定动画样式-->
			<input type="button" @click="flag=!flag" value="切换"/>
			<transition>
				<h3 v-if="flag">动画效果显示文字</h3>
			</transition>
			
			<hr />
			
			<!--自定义name的动画样式-->
			<input type="button" @click="flag2=!flag2" value="切换2"/>
			<transition name="my">
				<h3 v-if="flag2">动画效果2</h3>
			</transition>
			
			<hr />
			
			<!--第三方库动画样式-->
			<input type="button" @click="flag3=!flag3" value="切换3"/>
			<transition enter-active-class="animated  bounceIn" leave-active-class="animated  bounceOut">
				<h3 v-if="flag3">动画效果2</h3>
			</transition>
			
			<hr />
			
			<!--注意，v-foe渲染标签元素的时候不能使用template，要使用transition-group-->
			<label for="id">输入id:</label>
			<input id="id" v-model="id" />
			
			<label for="name">输入name:</label>
			<input id="name" v-model="name" />
			
			<input type="button" @click="addButton" value="添加item" />
			<ul>
				<!--普通的入场效果appear-->
				<transition-group appear>
					<li v-for="(item,i) in groupArr"  :key="item.id" @click="del(i)" >{{item.name}}</li>
				</transition-group>
			</ul>

			
		</div>
		
		<script>
			var vm=new Vue({
				
				el:"#app",
				data:{
					flag:false,
					flag2:false,
					flag3:false,
					id:"",
					name:"",
					groupArr:[
						{ id :1 ,name:"chen"},
						{ id :2 ,name:"zhang"},
						{ id :3 ,name:"cwh"},
					]
				},
				methods:{
					addButton:function(){
						if(this.id!=""&&this.name!=""){
							this.groupArr.push({id:this.id,name:this.name});
							this.id=this.name="";					
						}
						
					},
					del:function(i){
						this.groupArr.splice(i,1);
					},
				}
			});
		</script>
	</body>
</html>

使用Vue动画钩子函数实现半场动画

实例效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/Vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="animate.css"/>
		<style>
			.cycle{
				width: 20px;;
				height: 20px;
				border-radius: 50%;
				background: red;
			}
			
		</style>
	</head>
	<body>
		
		<div id="app">
			<input type="button" @click="flag=!flag" value="快到碗里来" />
			<!--动画-->
			<transition @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter">
				<div v-show="flag" class="cycle"></div>
			</transition>
			
		</div>
		
		<script>
			var vm=new Vue({
				
				el:"#app",
				data:{
					flag:false
				},
				//动画钩子函数，第一个参数：要执行动画效果的DOM对象。
				methods:{
					beforeEnter:function(el){
//						el.style.opacity="1"
						el.style.transform="translate(40px,20px)";
					},
					Enter:function(el,done){
						el.offsetWidth;//必要！？？？、、、
						el.style.transition="all 1s";
						el.style.transform="translate(400px,400px)";	
						
						done();//done函数表示afterEnter函数，即立即引用下面函数，没有延迟
					},
					afterEnter:function(el){
//						el.style.opacity="0";.
						this.flag=!this.flag;//让动画完成后的小球隐藏
					}
				}
			});
		</script>
	</body>
</html>