【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">changeel-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>