vue transition动画

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<template>  　 <button @click="openClick">开关</button> 　　<transition name="fade"> 　　　　<div v-if="show" class="open-more"> 动画内容</div> 　　</transition> </template><br> <style >   .fade-enter {       opacity: 0;       color: rgb(232, 6, 6);   }   .fade-enter-active {       transition: all 2s;   }   .fade-enter-to {       color: rgb(10, 58, 171);       opacity: 1   }     .fade-leave {       opacity: 1;       color: rgb(232, 6, 232);   }   .fade-leave-active {       transition: all 2s;   }   .fade-leave-to {       color: rgb(42, 171, 10);       opacity: 0   } </style>

动画主要通过6个类名来控制

进入（显示，创建）

v-enter 进入前 （vue3.0 v-enter-from）

v-enter-active 进入中

v-enter-to 进入后

离开（隐藏，移除）

v-leave 离开前 （vue3.0 v-leave-from）

v-leave-active 离开中

v-leave-to 离开后