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
  

原文地址：https://blog.csdn.net/qq_17328759/article/details/142636692

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！