[Vue] : 动画
Vue中的动画,包括: 4个时间点 v-enter: 定义进入过渡的开始状态。 v-enter-to: 定义进入过渡的结束状态。 v-leave: 定义离开过渡的开始状态。 v-leave-to: 定义离开过渡的结束状态。 2个时间段 v-enter-active: 定义进入过渡生效时的状态。 v-leave-active: 定义离开过渡生效时的状态。 典型示例: html,使用 transition 将需要过渡的元素包裹起来 <div id="app"> <input type="button" value="切换" @click="flag = !flag"> <transition> <h3 v-if="flag">这是一个H3</h3> </transition> </div> javascript var vm = new Vue({ el: '#app', data: { flag: false } }) css /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */ .v-enter, .v-leave-to { opacity: 0; } /* 定义进入和离开时候的过渡状态 */ .v-enter-active, .v-leave-active { transition: all 0.4s ease; } 默认 transcition 元素自动使用 v- 样式