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>
上一篇下一篇

猜你喜欢

热点阅读