过渡和动画

动画效果

<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包裹