Vue 2.0学习笔记:Vue的animation

上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成,具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制,对于一些复杂的动效,还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来,实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation

回忆一下CSS中的animation

CSS的animation已经不是什么新技术了,在Web上随处都有可能看到CSS的animation实现的动效。而且社区中有关于使用animation实现动画的库也非常的多,比如@Daniel Eden的Animate.CSS

在CSS中animation的原理非常的简单,首先要通过@keyframes声明一个动画,然后通过animation-name来调用声明好的动画名。当然animation还提供了其他的属性来帮助我们更好的控制CSS动画。有关于CSS的动画相关的介绍,这里不做过多的阐述,如果你感兴趣的话可以点击这里这里进行了解。

在这里我们来看一个简单的动画案例:

有关于CSS 动画相关的代码就不贴出来了,感兴趣的话可以直接查看上面的Demo。那么我们接下来看看在Vue中怎么运用CSS的animation来实现动效。

Vue中的animation

在Vue中实现animation效果的用法和transition类似,同样是把需要设有动效的元素放置在<transition>中。animationtransition不同的是在animationv-enter类名在节点插入DOM后不会立即删除,而是在animationEnd事件触发时删除。比如下面这个示例:

<!-- Bounce.vue -->
<template>
    <div class="animation">
        <button @click="isToggle" :class="isShow ? 'is-show' : 'is-hidden'">
            {{ isShow ? "隐藏" : "显示" }}
        </button>
        <transition name="bounce">
            <div class="animation-el" v-if="isShow"></div>
    
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-animation.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部