動畫效果

<script setup>
    import {ref} from 'vue'
    let name=ref('test')
    let isShow=ref(true)
</script>
<template>
<button @click="isShow=!isShow">顯示/隱藏</button>
<!-- 如果給transition加上name屬性，那麼對應的css屬性中v-enter-active就得改成name的值
例如，name=“hello”,那麼v-enter-active就變成hello-enter-active -->
<transition appear>
    <div v-show="isShow" >
        <h1>{{name}}</h1>
    </div>
</transition>
   
    
</template>
<style scoped>
   h1{
       background
 
-color: blanchedalmond;
   }
   .v-enter-active{
       animation: an 1s;
   }
   .v-leave-active{
       animation: an 1s reverse;

   }
   @keyframes an{
       from{
           transform: translateX(-1000px);
       }
       to{
           transform: translateX(0px);
       }
   }
</style>

過度效果

<script setup>
    import {ref} from 'vue'
    let name=ref('test')
    let isShow=ref(true)
</script>
<template>
<button @click="isShow=!isShow">顯示/隱藏</button>
<!-- 如果給transition加上name屬性，那麼對應的css屬性中v-enter-active就得改成name的值
例如，name=“hello”,那麼v-enter-active就變成hello-enter-active -->
<transition appear name="d">
        <h1 v-show="isShow">{{name}}</h1>
</transition>
   
    
</template>
<style scoped>
   h1{
       background
 
-color: blanchedalmond;
   }
   .d-enter-active,.d-leave-active{
       transition: 1s linear;
   }
    .d-enter,.d-leave-to{
        transform: translateX(-100%);
    }
    .d-enter-to,.d-leave{
        transform: translateX(0);
    }

</style>

多個元素過度

<script setup>
    import {ref} from 'vue'
    let name=ref('test')
    let isShow=ref(true)
</script>
<template>
<button @click="isShow=!isShow">顯示/隱藏</button>
<!-- 如果給transition加上name屬性，那麼對應的css屬性中v-enter-active就得改成name的值
例如，name=“hello”,那麼v-enter-active就變成hello-enter-active -->
<transition-group appear name="d">
        <h1 v-show="!isShow" key="1">你好</h1>
        <h1 v-show="isShow" key="2">welcome</h1>

</transition-group>
   
    
</template>
<style scoped>
   h1{
       background-color: blanchedalmond;
   }
   .d-enter-active,.d-leave-active{
       transition: 1s linear;
   }
    .d-enter,.d-leave-to{
        transform: translateX(-100%);
    }
    .d-enter-to,.d-leave{
        transform: translateX(0);
    }

</style>

第三方動畫

<script setup>
    import {ref} from 'vue'
    import 'animate.css'
    let name=ref('test')
    let isShow=ref(true)
</script>
<template>
<button @click="isShow=!isShow">顯示/隱藏</button>
<!-- 如果給transition加上name屬性，那麼對應的css屬性中v-enter-active就得改成name的值
例如，name=“hello”,那麼v-enter-active就變成hello-enter-active -->
<transition-group appear 
       
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutLeft">
        <h1 v-show="!isShow" key="1">你好</h1>
        <h1 v-show="isShow" key="2">welcome</h1>

</transition-group>
</template>
<style scoped>
   h1{
       background-color: blanchedalmond;
   }
</style>

寫法：
1.準備好樣式：
元素進入的樣式：
v-enter：進入的起點
v-enter-active：進入的過程中
v-enter-to：進入的終點
元素離開的樣式：
v-leave：離開的起點
v-leave-actvie：離開的過程中
v-leave-to：離開的終點
2.誰需要用動畫或者過度，則需要加上transition包裹