前端框架vue.js系列（11）：元素动画过渡效果

谁借莪１个温暖的怀抱￠ 2021-09-14 06:30 533阅读 0赞

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。它们包括：

（1）在CSS过渡和动画中自动应用 class

（2）配合使用第三方 CSS 动画库，引入animate.css实现效果过渡

（3）配合使用第三方 JavaScript 动画库，引入velocity.js实现效果过渡

（4）引入tween.js数值实现数值过渡

**在CSS过渡和动画中自动应用 class**

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡。也就是说，使用这种方法实现过渡效果，需要将实现效果的标签放到<transition ></transition>内。当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：  
1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。  
2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。  
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

参考Demo：

点击按钮即可看到过渡效果。

（注）从上面例子可看到<transition name="fade">定义了name为'fade'，这个'fade'的作用在于命名过渡动画样式，如上例子中的样式.fade-?-?。这是这种过渡效果的命名规则。在进入/离开的过渡中，会有 6 个 class 切换：

.name-enter:定义进入过渡的开始状态，在元素被插入时生效，在下一个帧移除。
    .name-enter-active:定义过渡的状态。在元素整个过渡过程中作用,这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
    .name-enter-to: 2.1.8版及以上,定义进入过渡的结束状态。在元素被插入一帧后生效。
    .name-leave: 定义离开过渡的开始状态,在离开过渡被触发时生效，在下一个帧移除。
    .name-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
    .name-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)。

上例中的运行过程如图所示：  
![Center][]

**引入animate.css实现效果过渡**

这种方法需要引用animate.css，百度上搜一下即可下载。它在进入/离开的过渡中，也会有 6 个 状态切换，与上一种类似：

enter-class  
enter-active-class  
enter-to-class (2.1.8+)  
leave-class  
leave-active-class  
leave-to-class (2.1.8+)

参考Demo：

（注）所包含的动画效果可以到animate.css官网查看。

引入velocity.js实现效果过渡

通过使用transition的钩子函数监听，监听状态类别如下：  
<transition  
  v-on:before-enter="beforeEnter"  
  v-on:enter="enter"  
  v-on:after-enter="afterEnter"  
  v-on:enter-cancelled="enterCancelled"  
  v-on:before-leave="beforeLeave"  
  v-on:leave="leave"  
  v-on:after-leave="afterLeave"  
  v-on:leave-cancelled="leaveCancelled"  
></transition>

参考Demo：

**引入tween.js数值实现数值过渡**

这种过渡效果是：当数字变化时，有一个动态的数字滚动效果。

参考Demo：

[Center]: /images/20210813/b17f6ba9e7ad4ff8b9e8aa5d2b85e8c2.png