正文

Vue中的动画

譬如朝露 V管理员/ / 0 评论/ 869阅读
03 21

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue动画</title>
		<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="flag=!flag">点击</button>
			<transition name="drop">
				<h1 v-if="flag">{{title}}</h1>
			</transition>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					title:'hello Vue',
					flag:true
				},
				methods:{
					
					
				}
			})
		</script>
	</body>
	<style>
		.drop-enter{
			transform: translateX(10px);
			opacity: 0;
		}
		.drop-enter-active,.drop-leave-active{
			transition: all 1s;
		}
		.drop-leave-to{
			opacity: 0;
			transform: translateX(10px);
		}
		
	</style>
</html>

动画钩子函数

beforeEnter() 设置过渡进入之前的组件状态

enter()设置过渡进入完成时的组件状态

afterEnter()设置过渡进入完成之后的组件状态


beforeLeave()设置过渡离开之前的组件状态

leave()设置过渡离开完成时的组件状态

afterLeave()设置过渡离开完成之后的组件状态



文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。