Vue.js学习记录-7-Vue进阶：动画特效

8.动画特效

CSS过渡动画原理

在Vue底层中，通过**<transaction>标签包裹的内部元素会进行自动构建动画流程。即：Vue是通过更换元素上的class**来进行过渡动画效果的呈现的。

下图是CSS过渡动画(入场动画)的执行流程，离场动画同理。

在过渡动画流程中可以看出：被<transaction>包裹的内部元素会在该流程中进行class的添加和去除。
- 初始状态：内部元素添加fade-enter、fade-enter-active
- 中间状态：内部元素去除fade-enter，添加fade-enter-to
- 最终状态：内部元素去除fade-enter-active、fade-enter-to
下面例子中，通过按钮点击事件对show的值进行该**<div>元素的显示与否**，method以及data就不做展示了。
```
  <transition>
      <div v-if="show">
              Hello World
      </div>
  </transition>	
```
添加嵌入式的CSS样式
```
  <style type="text/css">
      .v-enter, .v-leave-to {
          opacity: 0; 
      }
      /* 当被transition包裹的元素在显示的过程中，enter-active是一直存在。而当被包裹元素消失的过程中，leave-active是一直存在的*/
      .v-enter-active, .v-leave-active {
          transition: opacity 3s;
      }
  </style>
```
设置opacity变量值，通过transition进行监控opacity的值变化，变化后便进行3s的动画过渡效果。

动画演示：注意在<transition>包裹的内部元素的class变化*
- 入场过渡动画
- 离场过渡动画
  
  TIPS：<transition>标签可以添加name属性，该属性决定了过渡动画所添加的类名。例如：name=“fade”，此时过渡动画
所添加的class为：fade-enter等。默认不添加name属性时，过渡动画的class默认是：v-enter等，例子中采用的就是默认值。

Animate.css库

Animate.css 一款强大的预设css3动画库

改造上述例子：加入animate.css动画库。

引入animate.css动画库：

  <link rel="stylesheet" type="text/css" href="./animate.css">

改造**<transition>**标签

  <!-- 采用animation.css库中的动态CSS样式 -->
  <!-- 这里对过渡动画中的enter-active 和 leave-active所属的类样式名称更改为animated xxx -->
  <transition 
      enter-active-class="animated swing"
      leave-active-class="animated rubberBand"
      >
      <div v-if="show">
              Hello World
      </div>
  </transition>

动画效果演示：
- 入场
- 离场
- 执行时长：默认的动画执行时长是1s，详情见下图。
Animate.css动画库实际上是采用了CSS3标准下的keyframe规则，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

过渡和动画特效结合

仍然是改造上述例子：将过渡动画和animate动画结合使用。

引入嵌入式CSS样式：

 <style>
     .fade-enter, .fade-leave-to {
         opacity: 0;
     }
     .fade-enter-active, .fade-leave-active {
         transition: opacity 3s;
     }
 </style>

改造<transition>标签内容：

 <!-- 采用animation.css库中的动态CSS样式 -- C3中keyframe形式的封装动画库-->
 <!-- 这里对过渡动画中的enter-active 和 leave-active所属的类样式名称更改为animated xxx -->
 <!-- appear 自定义类名为animation库中的动画效果，此时在页面刷新时，也会具有相应设置的动画效果，即入场动画-->
 <!-- type 属性控制动画执行时长的控制，过渡动画transaction为3s，animate默认为1s,这里采用了过渡动画的执行时长 -->
 <!-- 自定义动画时长 :duration="5000" 或者区分入场和退场动画：{enter:5000, leave: 10000}-->
 <transition 
     type="transition"
     name="fade"
     appear 
     enter-active-class="animated swing fade-enter-active"
     leave-active-class="animated rubberBand fade-leave-active"
     appear-active-class="animated swing"
     >
     <div v-if="show">
             Hello World
     </div>
 </transition>

测试效果：
1. 页面刷新动画
2. 入场动画
3. 离场动画

Js动画和Velocity.js结合

在开始本小节内容之前，我们先来了解一下网页的交互动画。

网页交互动画大概分为：CSS动画，Js动画。

CSS动画：

  由于CSS3可以根据CSS属性自定义动画，所以这类动画的优点就是不用进行计算和更改DOM会显得非常流畅。
  可以通过@keyframes规则创建动画。 @keyframes规则内部指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

Js动画：

   Js动画拥有强大的性能，并且优于css动画。根据Js来改变属性值，所以没有css那样的局限性，可以实现更多的功能的动画。

Velocity.js：

  Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。
  它能和jQuery完美协作，并和$.animate()有相同的 API，但它不依赖jQuery，可单独使用。 
  Velocity不仅包含了$.animate()的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG动画、滚动动画等特色功能。
  它比$.animate()更快更流畅，性能甚至高于CSS3 animation，是jQuery和CSS3 transition的最佳组合，它支持所有现代浏览器。

改造例子

引入Velocity.js

  <script src="./velocity.js"></script>

改造**<transition>**标签，例子仅展示出场动画。

  <!-- 绑定JS动画钩子事件 入场动画before-enter、enter、after-enter -->
  <!-- 出场动画对应的JS钩子函数：before-leave、leave、after-leave -->
  <transition name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
  >
      <div v-show="show">
          Hello World
      </div>
  </transition>

methods中添加绑定方法：在handleEnter方法中采用Velocity.js进行了改写。

 methods: {
     handleClick: function() {
         this.show = !this.show
     },
     handleBeforeEnter: function(el) {
         el.style.color = 'red'
         el.style.opacity = 0;
     },
     handleEnter: function(el, done) {
         // setTimeout(() => {
         //     el.style.color = 'green'
         // }, 2000)

         // setTimeout(() => {
         //     done()
         // }, 4000)
         // Js动画库 - velocity.js
             Velocity(el, {
                 opacity: 1
             }, {
                 duration: 3000,
                 complete: done
             })
     },
     handleAfterEnter: function(el) {
         el.style.color = 'green'
         console.log("动画结束")
     }
 }

Js动画演示，仅出场动画(点击按钮，红色字样出现，持续三秒，字样颜色变绿色，控制台打印信息，动画流程结束)

多个元素或组件的过渡

<transition>标签中通过mode属性设置元素切换效果：out-in、in-out

多个元素

  <!-- 默认情况下vue会进行DOM元素的复用，使得过渡动画效果无法得以展示，添加key属性值可以避免vue的DOM复用 -->
  <!-- mode属性可以设置元素切换的效果 in-out、out-in-->
  <transition mode="out-in">
      <div v-if="show" key="hello">Hello World</div>
      <div v-else key="bye">Bye World</div>
  </transition>

多个组件

  <!-- 通过动态组件的方式，实现组件的切换动画效果 -->
  <transition mode="out-in">
      <component :is="type"></component>
  </transition>

列表过渡

列表过渡通过：<transition-group>标签实现，以下通过遍历列表例子说明

使用**<transition-group>标签做列表过渡**

  <!-- 列表过渡采用transaction-group标签 -->
  <transition-group>
      <div v-for="item of list" :key="item.id">
          {{item.title}}
      </div>
  </transition-group>

演示列表过渡

动画封装：采用组件的形式将常用的动画效果进行封装

例如：将采用Js动画钩子的上述案例进行组件整合如下：

声明全局组件

  Vue.component('fade', {
      props: ['show'],
      template: `
          <transition mode="out-in" @before-enter="handleBeforeEnter"
          @enter="handleEnter"
          @after-enter="handleAfterEnter">
              <slot v-if="show"></slot>
          </transition>
      `,
      methods: {
          handleBeforeEnter: function(el) {
              el.style.color = 'red';
          },
          handleEnter: function(el, done) {
              setTimeout(() => {
                  el.style.color = 'green';
              }, 2000)

              setTimeout(() => {
                  done();
              }, 4000)
          },
          handleAfterEnter: function(el) {
              el.style.color='black';
              console.log("动画结束");
          }
      }
  })

DOM中使用该动画组件

  <fade :show="show">
  	<h2>Tom and Jerry</h2>
  </fade>

Vue.js学习记录-7-Vue进阶：动画特效

猜你喜欢