特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
上一节我们学习了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>
中。animation
和transition
不同的是在animation
中v-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>
如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-animation.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!