标签：动画 Vue transition leave enter active 元素 类名

Vue使用过渡类名实现动画

步骤：
1.使用transition元素，把需要被动画控制的元素包裹起来
2. 自定义两组样式，来控制 transition 内部的元素实现动画

样式表内代码

		/* .v-enter,是一个时间点,是进入之前,元素的起始状态,此时还没有开始进入 */
		/* .v-leave-to 是一个时间点,是动画离开后,离开的终止状态,此时元素动画已经结束 */
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(80px);
		}
		/* .v-enter-active  入场动画的时间段 */
		/* .v-leave-active  离场动画的时间段 */
		.v-enter-active,
		.v-leave-active{
			transition: all 0.4s ease;
		}

HTML代码

	<div id="app">
		<input type="button" name="" id="" value="切换" @click="flag=!flag"/>
		<!-- 1.使用transition元素，把需要被动画控制的元素包裹起来 -->
		<transition>
			<h3 v-if="flag">123123</h3>
		</transition>
	<div>			

JS代码

		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					flag:true
				},
				methods:{}
			})
		</script>

假如有两种动画效果如何区分

1.给 transition 添加一个 name ，通过 transition 的 name 属性来区分

<input type="button" name="" id="" value="切换2" @click="flag2=!flag2"/>
			<!-- 1.使用transition元素，把需要被动画控制的元素包裹起来 -->
			<transition name="my">
				<h3 v-if="flag2">123123</h3>
			</transition>

2.把 v- 前缀改为我们自定义的 name 名即可实现不同的动画效果

		/* .v-enter,是一个时间点,是进入之前,元素的起始状态,此时还没有开始进入 */
		/* .v-leave-to 是一个时间点,是动画离开后,离开的终止状态,此时元素动画已经结束 */
		.my-enter,
		.my-leave-to{
			opacity: 0;
			transform: translateY(80px);
		}
		/* .v-enter-active  入场动画的时间段 */
		/* .v-leave-active  离场动画的时间段 */
		
		.my-enter-active,
		.my-leave-active{
			transition: all 0.8s ease;
		}

<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					flag2:true
				},
				methods:{}
			})
		</script>

标签：动画,Vue,transition,leave,enter,active,元素,类名
来源： https://blog.csdn.net/weixin_46659420/article/details/116888784

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。