【vue3】Transition过渡组件

组件"/>

【vue3】Transition过渡组件

• Transition 自带的内部组件
• xxx-enter-from 开始进入过渡 0%
• xxx-enter-active 过渡过程
• xxx-enter-to 过渡完成 100%
• xxx-leave-from 开始退出 0%
• xxx-leave-active 退出过程
• xxx-leave-to 退出完成 100%
  xxx是组件属性name的值，自定义的。我使用的是fade-box

<template><div><el-button @click="flag = !flag">change</el-button><Transition name="fade-box"><div v-if="flag" class="box"></div></Transition></div></template><script setup lang='ts'>import { ref } from 'vue'const flag = ref(false)</script>
<style scoped lang='scss'>
.box{width: 200px;height: 200px;background-color: red;
}.fade-box-enter-from{width: 0;height: 0;
}
.fade-box-enter-active{transition: all 2s ease-in-out;
}
.fade-box-enter-to{width: 200px;height: 200px;
}
.fade-box-leave-from{width: 200px;height: 200px;
}
.fade-box-leave-active{transition: all 2s ease-in-out;
}
.fade-box-leave-to{width: 0;height: 0;
}</style>