项目开发中动画有着很重要的做用,并且也是用到的地方很是多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,能够说咱们网页上的动画无处不在,也有人说了,这些东西也能够不使用动画。css
对,你说的没错能够不使用,可是,首先你要说服你的产品经理咱能不能简单点,不搞这么多虚的来点实际的,说完以后我估计大家俩得立马干起来,其次,在你的网页上不使用动画不够逼格啊,并且我们的网页也不够生动,没有活力,因而可知动画的不可或缺性。微信
上面只是开个玩笑,下面我们进入主题,看看 Vue 中如何更好更简单的添加动画。ide
首先,Vue 在插入,修改或者移除 DOM 时,提供了多种不一样的添加动画的方法,在 Vue 中咱们使用 <transition>
和 <transition-group>
组件时,Vue 会给咱们提供一些内置的 CSS 类与 JS 钩子函数。函数
先来看看咱们要实现一个什么样子的案例效果学习
图中的例子是一个很是常见的图片切换效果,不过在这个例子中咱们只是单纯的实现图片的切换,看起来很是的生硬,没有任何的过渡效果,下面咱们来给图片加一点动画的效果,让它看起来很是的有逼格。动画
被 <transition>
包裹的组件,在组件的不一样阶段会产生不一样的 class 类名进行切换this
官网上的一张图片很是友好的展现了这个切换的过程。url
v-
是 Vue 中默认的类名前缀,咱们在使用的过程当中若是一直使用默认的命名方式的话,必然会致使一些冲突,因此 Vue 给咱们提供了一个自定义命名的方案,咱们只须要给 <transition>
添加一个 name 属性便可。spa
既然咱们知道了方法,咱们就来给它加一个简单的动画。code
<template> <ul class="tabs-list"> <li v-for="tab in tabs" :key="tab.id" :class="{active: tabOn === tab.id}" > <a @mouseover="tabOn = tab.id" :href="tab.url" target="_blank" > {{tab.name}} <transition name="flip"> <img v-show="tabOn === tab.id" :src="tab.imgUrl"> </transition> </a> </li> </ul> <template> <style lang="scss" scoped> .flip-enter-active { transition: transform 1s; } .flip-leave-active { transition: transform 1s; } .flip-enter, .flip-leave-to { transform: scaleY(0); } </style>
与上面 CSS 过渡不一样的是,咱们这里说的 CSS 动画是利用 @keyframes 来建立与上面相似的动画效果。
<style lang="scss" scoped> @keyframes scaleY-in { 0% { transform: scaleY(0); } 50% { transform: scaleY(0.5); } 100% { transform: scaleY(1); } } .flip-enter-active { animation: scaleY-in 1s; } .flip-leave-active { animation: scaleY-in 1s reverse; } </style>
Vue 中给咱们提供了自定义 CSS 类名的方法,很是好的支持了与第三方动画库的结合。
上面两个动画都是咱们本身动手写出来的,可是有些时候咱们本身手写的并非那么完美,或者项目的时间比较紧张,这个时候选择第三方库就是一个比较好的方案。咱们继续利用 Animate.css 动画库修改咱们上面的例子。
<transition name="flip" enter-active-class="animated rotateIn" leave-active-class="animated rotateOut" > <img v-show="tabOn === tab.id" :src="tab.imgUrl"> </transition>
Vue 中还给咱们提供了一些钩子函数,咱们可使用 JavaScript 钩子函数构建动画。
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" :css="false" > </transition>
全部钩子都会传入一个 el(元素)参数,enter/leave 函数还会传入一个 done 函数做为参数。它会告知咱们的动画完成,咱们绑定了 css 为 false,告诉组件跳过 CSS 的检测,使用 JavaScript。
咱们结合 Velocity.js 动画,来修改完成咱们的动画效果。
<transition @enter="enter" @leave="leave" :css="false" > <img v-show="tabOn === tab.id" :src="tab.imgUrl"> </transition> <script> methods: { enter(el, done) { Velocity(el, { scaleY: "0" }); Velocity(el, { scaleY: "0.5" }, { duration: 1000 }); Velocity(el, { scaleY: "1" }, { complete: done }); }, leave: function(el, done) { Velocity(el, { scaleY: "1" }); Velocity(el, { scaleY: "0.5" }, { duration: 1000 }); Velocity(el, { scaleY: "0" }, { complete: done }); } } </script>
咱们再来回头看看上面的例子,无论咱们使用何种方式实现的动画,你会发现一个问题就是,动画在切换的时候二者(进入/离开)是同时进行的,有些时候,咱们并不但愿产生这种效果,对咱们的动画效果很是的不友好,好比咱们看看下面的这个例子。
<template> <div class="translate-container" @click="clickHandler"> <transition name="slide"> <img v-if="isShow" src="./feature/03.jpg" key="first"> <img v-else src="./feature/04.jpg" key="second"> </transition> </div> </template> <script> export default { methods: { clickHandler() { this.isShow = !this.isShow; } } } </script> <style lang="scss" scoped> .slide-enter-active, .slide-leave-active { transition: all 0.5s; } .slide-leave-to, .slide-enter { transform: scaleY(0); } </style>
很显然,这种是很是很差的效果,值得高兴的是 Vue 中给咱们提供了一个解决方案-- 过渡模式,咱们不须要增长额外的代码,只须要修改下特性便可。
Vue 给咱们提供了两种过渡模式。
过渡模式只会在相互切换的元素中才会生效
<transition name="fade" mode="out-in"></transition> <transition name="fade" mode="in-out"></transition>
下面咱们就用过渡模式修改咱们上面的案例。
<transition name="slide" mode="out-in"> <img v-if="isShow" src="./feature/03.jpg" key="first"> <img v-else src="./feature/04.jpg" key="second"> </transition>
Vue 给咱们提供了比较直观灵活的 API,方便咱们在项目中添加动画的效果。
Vue 中除了这些单元素的动画之外还提供了<transition-group>
给个人列表(使用v-for 时的场景)添加动画,喜欢动画的小伙伴能够动手去尝试绘制一些本身喜欢的动画。
文中若有不足之处,欢迎留言指正,若是本文对你有帮助,欢迎转发点赞。
关注微信公众号:六小登登。领取全套学习资源