Vue.js前端开发技术 课件 第八章 Vue 动画

Vue动画Vue动画transition组件使用@keyframes创建CSS动画appear初始渲染动画什么是过渡和动画 自定义类名结合animate.css实现动画 钩子函数实现动画Vue动画什么是过渡和动画CSS3的出现，使得前端动画直接上了一个层次。我们可以抛掉落后的.animate()方法，通过transition、animation等样式属性，只需要配置起点终点、时间、加速度曲线，甚至还可以配置关键帧、循环播放等，就可以实现超级高大上的动效，同时还不用小心翼翼地避开性能问题。而Vue则是再一次优化了动画的使用，提供了多组件过渡、多元素过渡、CSS动画、Javascript动画等各种方式，开发者可以很方便地实现一些常用的列表过渡、页面切换等动画效果。不知道大家平时用的多不多，但如果你也有仔细研究的话，会发现还是挺有意思的。Vue动画transition组件<transition>元素作为单个元素/组件的过渡效果，它只会把过渡效果应用到其包裹的内容上，而不会额外渲染DOM元素，也不会出现在检测过的组件层级中。Vue过渡主要分为两类：CSS动画和Javascript动画。根据官方描述，Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果，举例如下：在CSS过渡和动画中自动应用class（CSS动画）可以配合使用第三方CSS动画库，如Animate.css（CSS动画）在过渡钩子函数中使用JavaScript直接操作DOM（Javascript动画）可以配合使用第三方JavaScript动画库，如Velocity.js（Javascript动画）Vue动画CSStransitionCSStransitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用CSStransitions后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。通常将两个状态之间的过渡称为隐式过渡（implicittransitions），因为开始与结束之间的状态由浏览器决定。transition使用CSStransitions可以决定哪些属性发生动画效果(明确地列出这些属性)，何时开始(设置delay），持续多久(设置duration)以及如何动画(定义timingfuntion，比如匀速地或先快后慢)。CSS过渡由简写属性transition定义是最好的方式：CSS过渡Vue动画csstransition的基本使用csstransition属性说明property 指定哪个或哪些CSS属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。all则为全部属性duration 指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长timing-function 指定一个函数，定义属性值怎么变化。常用如linear、easedelay 指定延迟，即属性开始变化时与过渡开始发生时之间的时长例子，下面是简写和不简写的例子：Vue动画transition组件使用Vue提供了transition的封装组件，可以给元素和组件添加entering/leaving过渡。我们看看有哪些情况下可以使用transition：条件渲染(使用v-if)条件展示(使用v-show)动态组件组件根节点transition的封装组件，主要是结合组件生命周期，在一些特殊逻辑（如v-if、v-show、v-for）里增加钩子，来触发动画的实现。我们知道，Vue里面实现动画过渡有CSS和Javascript两种，而两种又是可以结合的。Vue动画transition组件例子Vue动画transition组件例子解析这里是使用的CSStransition方式来实现动画过渡的，我们看看在切换v-if的时候都发生了什么:(1)v-if绑定值的变更，导致插入或删除包含在transition组件中的元素。(2)自动嗅探目标元素是否应用了CSS过渡或动画。这里的确使用CSS过渡，于是会在元素添加时添加CSS类名，并判断动画加载完之后删除CSS类名。(3)如果过渡组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用。（这里由于没有使用到，故不会执行）(4)如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行。（当然在我们的例子中，这一步也不会生效）Vue动画transition组件实现逻辑根据前面内容，我们可以获得以下的信息。可以使用requestAnimationFrame来请求浏览器在下一次重绘之前调用指定的函数来更新动画当CSStransition结束时，会触发transitionend事件所以结合之前的Vue源码，能大概得到这里的实现方式transition组件关注子元素是否展示，包括使用v-if/v-else/v-for等指令绑定数据生成的元素。当元素状态变更（display->none或none->display）时，预埋的钩子检测是否应用了CSS过渡。若使用了CSS过渡，则分两种情况讨论。Vue动画transition组件实现逻辑进入动画可当元素插入完成后（mounted），给元素添加对应v-enter和v-enter-active类名，此时元素开始动画过渡。同时通过requestAnimationFrame来指定下一帧绘制前，给元素添加v-enter-to类名，同时移除v-enter类名。设置动画结束时间，或者通过transitionend事件监听，在过渡结束后，移除v-enter-to和v-enter-active类名。离开动画

当元素删除前（beforeDestroy），给元素添加对应v-leave和v-leave-active类名，此时元素开始动画过渡。同时通过requestAnimationFrame来指定下一帧绘制前，给元素添加v-leave-to类名，同时移除v-leave类名。设置动画结束时间，或者通过transitionend事件监听，在过渡结束后，移除v-leave-to和v-leave-active类名，同时执行元素删除操作。Vue动画关键帧动画通一旦完成动画的时间设置，接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。当然，也可包含额外可选的关键帧，描述动画开始和结束之间的状态。Vue动画CSSanimationCSSanimations使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节。和transition不一样的是，该属性不能配置动画的实际表现，动画的实际表现是由@keyframes规则实现同样的，CSSanimation属性也是一个简写属性形式:Vue动画VueanimationCSS动画用法同CSS过渡，区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。Vue动画同时使用过渡和动画Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或animationend，这取决于给元素应用的CSS规则。如果你使用其中任何一种，Vue能自动识别类型并设置监听。但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，你就需要使用typeattribute并设置animation或transition来明确声明你需要Vue监听的类型。Vue动画同时使用过渡和动画除了CSS过渡和动画，在Vue中还可以使用Javascript钩子的方式来实现动画效果。我们来看看Vue动画一共有多少的Javascript钩子：Vue动画Javascript钩子例子官方提供一个使用Velocity.js的例子，这里就