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>

演示