### 1. 原理  ①动画装在 transition标签中 ② transition 标签的name为下方css的开头 ③vue底层已进行封装在不同的时间点会具有不同的class 通过样式完成动画 ④如图点击显示和隐藏两动画都含有三个class 而 v-enter-to和v-leave是固定的opacity：1不予考虑 ### 2. 实现一个简单的渐隐渐现动画 ~~~ //css .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } .fade-leave-to{ opacity:0; } .fade-leave-active{ transition: opacity 4s; } <div id="app"> <transition name="fade"> <div v-if="isShow">hello world</div> </transition> <button @click="handleClick">切换</button> </div> new Vue({ el:"#app", data:{ isShow:false }, methods:{ handleClick(){ this.isShow = !this.isShow; } } }) ~~~