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