logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年

transition:进入与离开过渡

在Vue中,你可以用v-if指令决定是否显示元素或组件,但不能直接应用基于class的过渡效果。需要使用Vue的transition组件来实现过渡效果。把元素类名称设为hazen,当组件状态is activetrue时,在元素上添加类headon,以触发过渡效果。通过v-if绑定is active,元素只在is activetrue时显示。加入transition后,进入和离开状态都能应用过渡效果。在CSS中,你可以通过进入前(the enter from), 进入激活(v enter active),和进入结束(v enter to)类设置过渡效果,如设置不透明度变化。同样,离开时也有相应的类(we live from, we leave active, we live to)来控制过渡效果。这样,在元素进入或离开时,都有过渡效果,从不透明过渡到透明或反之。