vue中使用过渡动画失效的问题

最新推荐文章于 2023-06-08 14:36:48 发布

原创最新推荐文章于 2023-06-08 14:36:48 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #css3

本文探讨了Vue中定义过渡动画时遇到的问题，特别是当元素已经应用了CSS transform属性时，Vue的过渡效果可能不会按预期工作。文章通过示例展示了如何解决这一问题。

定义css 属性，再vue中定义过渡属性动画失效（opatcity除外）

例如定义了 transform: translateX(-50%);，在 vue过渡中在使用transform: translateX(-50%)将失效

<template>
	<div>
        <transition name="my">
			    <div class="content" v-show="isShow"></div>
		</transition>
		<el-button @click="isShow=!isShow">启动</el-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.my-enter ,.my-leave-to{
		transform: translateX(200px);
		opacity: 0;
	}
	.my-enter-active,.my-leave-active{
		transition: all 1s;
	}
.content{
	width: 100px;
	height: 100px;
	background-color:red;
	position: fixed;
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
}
</style>

只有去掉css 中的transform: translateX(-50%); 动画才生效

<template>
	<div>
        <transition name="my">
			    <div class="content" v-show="isShow"></div>
		</transition>
		<el-button @click="isShow=!isShow">启动</el-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false
			}
		},

}
</script>

<style scoped lang="scss">
	.my-enter ,.my-leave-to{
		transform: translateX(200px);
		opacity: 0;
	}
	.my-enter-active,.my-leave-active{
		transition: all 1s;
	}
.content{
	width: 100px;
	height: 100px;
	background-color:red;
	position: fixed;
	left: 50%;
	top: 20px;

}
</style>

演示