内容简介:上一节我们学习了Vue 2.0中的CSS的
上一节我们学习了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> </transition> </div> </template> <script> export default { name: "Bounce", data() { return { isShow: false }; }, methods: { isToggle() { this.isShow = !this.isShow; } } }; </script> <style scoped> .bounce-enter-active { animation: bounce 1s; } .bounce-leave-active { animation: bounce 1s reverse; } @keyframes bounce { 0% { background-position: 50% calc(50% - 4em), 50% calc(50% + 0.4em); background-size: 2em 2em, 1em 1em; } 40% { background-position: 50% 50%, 50% calc(50% + 0.3em); background-size: 2em 2em, 3em 1em; } 45% { background-position: 50% 50%, 50% calc(50% + 0.3em); background-size: 2em 1.5em, 3em 1em; } 50% { background-position: 50% 50%, 50% calc(50% + 0.3em); background-size: 2em 1em, 3em 1em; } 100% { background-position: 50% calc(50% - 4em), 50% calc(50% + 0.3em); background-size: 2em 2em, 1em 1em; } } </style>
效果如下:
自定义过渡的类名
上面的示例中再次告诉我们,CSS动画可以像过渡一样在Vue中使用。前面也提到了,@Daniel Eden的 Animate.CSS 是一个非常优秀的CSS动画库。既然他这么优秀,因此在Vue中我们可以很容易地将其应用到相应的应用中。如果你需要把Animate.CSS运用到Vue中,你可以使用 npm
或CDN来添加 animate.css
到Vue应用程序中。
npm i animate.css --save
然后在 main.js
中引入 animate.css
:
import "animate.css"
如果通过CDN的话,可以 index.html
中通过 <link>
引入 animate.css
在CDN的地址,比如:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
animate.css
为我们提供了CSS类,让我们可以方便地向元素添加动画。但是我们如何在Vue中将这些类应用到对应的元素中呢?通过上一切的学习,我们了解到,可以通过 enter-class
、 enter-active-class
、 leave-class
和 leave-active-class
作为输入,帮助我们将动画类附加到对应的元素上。在Vue中,我们把这些类名称为自定义过渡类名:
enter-class enter-active-class enter-to-class leave-class leave-active-class leave-to-class
这几个类名在Vue中被称为 自定义过渡类名 ,他们的优先级高于普通的类名。特别是在引入像 animate.css
这样的第三方CSS动画库十分地有用。比如下面这个示例:
<!-- Bounce.vue --> <template> <div class="toogle-alert"> <button @click="isToggle" :class="isShow ? 'is-show' : 'is-hidden'"> {{ isShow ? "隐藏" : "显示" }} </button> <transition mode="out-in" appear enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" > <div class="alert alert-info" v-if="isShow" key="info"> {{ alertInfoMsg }} </div> <div class="alert alert-error" v-else key="error"> {{ alertErrorMsg }} </div> </transition> </div> </template> <script> export default { name: "Bounce", data() { return { isShow: true, alertInfoMsg: "Hello! W3cplus.com!", alertErrorMsg: "Goodbye! W3cplus.com!" }; }, methods: { isToggle() { this.isShow = !this.isShow; } } }; </script>
效果如下:
正如上例,在大多数情况下, enter-active-class
和 leave-active-class
足以满足所需的动画。
显式地过渡持续时间
在CSS的 animation
中,我们有 animation-duration
和 animation-delay
可以用来控制动画播放时间。而在Vue中,很多情况之下,可以自动得出过渡效果完成时间。默认情况下,Vue会等待其在过渡效果的根元素的第一个 transitionend
或 animationend
事件。然而也可以不这样设定,比如,我们可以拥有一个精心编排的一系列过渡效果,其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
在这种情况下,可以在 <transition>
上添加 duration
属性定制一个显式地过渡持续时间(以 ms
为单位),比如上面的示例,我们可以像下面这样添加 duration
属性值:
<transition mode="out-in" appear enter-active-class="animated zoomIn" leave-active-class="animated hinge" :duration="1000" > ... </transition>
得到的效果如下:
你也可以定制进入和移出的持续时间:
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
效果如下:
案例: 列表滚动
接下来看看怎么使用Vue中的 <transition>
和CSS动画来实现下图这样的效果:
在没有使用 <transition>
的情况下,实现上图的效果,我们可能会考虑下面这个示例这样的方式来实现:
接下来我们来看看怎么使用 animate.css
配合 <transition>
实现类似上例的效果:
详细代码不介绍。
<transition appear enter-active-class="animated slideInUp" leave-active-class="animated slideOutUp" mod="out-in" :duration="{ enter: 500, leave: 800 }" > <div :key="content.id" class="slider"> <div class="avatar"> <img :src="content.avatar" :alt="content.nick" /> </div> <div class="msg">{{ content.nick }} ! {{ content.msg }}</div> </div> </transition>
在这里我们引用了 slideInUp
和 slideOutUp
两个动画效果,分别在 enter-active
和 leave-active
两个状态调用。
在这个示例中,我们的内容不是通过 v-if
或 v-show
来插入和删除的,而以通过在 computed
中的 content()
方法配合一个 SliderAnimation()
函数来实现的。 SliderAnimation()
是一个定时器,在定时器中不断改变 computed
对应的值:
computed: { content() { return { id: this.num, avatar: this.lists[this.num].avatar, nick: this.lists[this.num].nick, msg: this.lists[this.num].msg }; } }, mounted() { this.SliderAnimation(); }, methods: { SliderAnimation() { this.lists.push(this.lists[0]); const max = this.lists.length; let timer = setTimeout(() => { this.num++; if (this.num >= max) { this.num = 0; } this.SliderAnimation(); }, this.totalDuration); } }
总结
这篇文章主要介绍了在Vue中的 <transition>
是如何结合CSS的 animation
动画库( animate.css
)实现动画效果。通过这篇文章的学习,我们已经了解了在Vue中 <transition>
是怎么实现 transition
和 animation
效果。其实在Vue中,有关于动画的内容不仅仅是这些,还有更多有意思的东西。我们将在后续的内容还会持续更新和关注这一领域的内容。感兴趣的同学欢迎关注后续的更新。如果您有更多的经验欢迎在下面的评论中与我们分享,如果文章中有不对之处,还请多多指正。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 【每日笔记】【Go学习笔记】2019-01-04 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-02 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-07 Codis笔记
- Golang学习笔记-调度器学习
- Vue学习笔记(二)------axios学习
- 算法/NLP/深度学习/机器学习面试笔记
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Rationality for Mortals
Gerd Gigerenzer / Oxford University Press, USA / 2008-05-02 / USD 65.00
Gerd Gigerenzer's influential work examines the rationality of individuals not from the perspective of logic or probability, but from the point of view of adaptation to the real world of human behavio......一起来看看 《Rationality for Mortals》 这本书的介绍吧!