动画效果
<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包裹