transition在vue2和vue3中的差异

背景：

在学习<transition/> 的时候，发现自己跟着视频抄写的代码，实现效果和示例代码不一致。

代码：

<template>
	<div id="app">
		<button id="btn" @click="changeShow">切换状态</button>
		<transition  name="ff" >
			<a v-if="show">HELLO</a>
		</transition >
	</div>
	<div>
		<transition name="bounce" mode="out-in">
			<button v-if="isOn" @click="isOn =! isOn">文案切换</button>
			<button v-else @click="isOn =! isOn ">再次切换</button>
		</transition>
	</div>
</template>

<script>
export default {
	name : "cssDemo",
	data : function () {
		return {
			show : true,
			isOn :true
		}
	},
	methods:{
		changeShow: function (){
			this.show=!this.show;
			console.log(`current show status: ${this.show}`)
		}
	}
}
</script>

<style scoped type="text/css">
/*v-enter v-enter-to v-leave v-leave-to v-enter-active v-leave-acitve*/
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.ff-enter-from,
.ff-leave-to{
	opacity: 0;
}

.ff-enter-to,
.ff-leave-from {
	opacity: 1;
}



.ff-enter-active {
	transition: all 4.3s ease;
}

.ff-leave-active {
	transition: all 1.3s ease;
}
</style>

查看官方文档

在vue2中使用v-enter，在vue3中使用v-enter-from。

• vue2:
  
• vue3