vue笔记之动画2-钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  	<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
  	<link rel="stylesheet" href="animate.min.css">
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
	/*自定义两组样式,来控制transition内部的元素实现动画*/
	/*.v-enter,
	.v-leave-to{opacity: 0;transform:translateX(150px);}
	.v-enter-active,
	.v-leave-active{transition: all 0.8s ease;}
	.my-enter,
	.my-leave-to{opacity: 0;transform:translateX(150px);}
	.my-enter-active,
	.my-leave-active{transition: all 0.8s ease;}*/
	.ball{
		width:15px;
		height:15px;
		border-radius: 50%;
		background-color: red;
	}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" name="" value="快到碗里来" @click="flag=!flag">
		
		<transition
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
		>
			<div class="ball" v-if="flag"></div>
		</transition>	
	</div>
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				flag:false
				
			},
			methods: {
				//动画钩子函数的第一个参数:el表示要执行动画的DOM元素,是个原生的js DOM对象
				//
				beforeEnter(el){
					// 表示动画入场之前,动画尚未开始,可以在beforeEnter中设置元素开始动画之前的起始样式
					el.style.transform = "translate(0,0)"
				},
				enter(el,done){//当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
					// 这句话没有实际的作用,但是如果不写,就没有动画效果
					// el.offsetWidth;el.offsetHeight;el.offsetLeft都可以
					el.offsetHeight;
					// 表示动画开始之后的样式,这里可以设置小球完成动画之后的,结束状态
					el.style.transform = "translate(150px,450px)";
					el.style.transition = "all 1s ease";
					done();
				},
				afterEnter(el){
					// 动画完成之后,会调用afterEnter
					this.flag = !this.flag;
				}
			}

		});
		
	</script>
</body>
</html>
发布了27 篇原创文章 · 获赞 2 · 访问量 6871
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览