vue中的动画
2019-07-31 本文已影响0人
没了提心吊胆的稗子
v-if
操作的是DOM
v-show
操作的是样式
如果频繁切换dom使用v-show
,当数据一开始就确定下来使用v-if
更好一些
如果v-if
不通过,内部指令就不会再执行
动画
vue自定义的组件
<transition>
进入前,进入后,离开前,离开后四个状态,中间两个可以合并为一个
即三个动作对应三种样式实现动画效果
.v-enter
进入之前,.v-enter-active
正在进入,.v-leave-active
正在离开
只能用在单个标签上,single element,若<transition>
标签中包含多个标签就会报错
若想给循环的元素设置动画可以使用<transition-group>
,但里面的每个子标签必须有key值确保唯一
多个动画之间通过
name
属性区分,此时的状态变为.jw-enter
,.jw-enter-active
,.jw-leave-active
<transition name="jw">
<div v-show="flag">啦啦啦</div>
</transition>
animate库
cnpm install animate.css
<transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
<div v-show="flag">你是猪</div>
</transition>