官网参考链接

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能。在 Vue 中有以下四种方式实现动画：

一、使用过渡类名实现动画

在进入/离开的过渡中，会有 6 个 class 切换。
- v-enter：进入过渡的开始状态。
- v-enter-active：进入过渡时间段。
- v-enter-to: 进入过渡的结束状态。
- v-leave: 离开过渡的开始状态。
- v-leave-active：离开过渡时间段。
- v-leave-to: 离开过渡的结束状态。

过渡类名

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的，则 v- 是这些类名的默认前缀。如果你使用了，那么 v-enter 会替换为 my-transition-enter。

CSS 过渡

常用的过渡都是使用 CSS 过渡，在定义过渡类名的时候使用 transition 属性。




  
  Vue-Animate
  


  
    
    
      Hello World

CSS 动画

CSS 动画用法同 CSS 过渡。区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。在定义过渡类名的时候使用 animation 属性。




  
  Vue-Animate
  


  
    
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.

animation 和 transition 主要区别在于：
1、animation多两个参数：循环和动画方式
2、transition 不能自行触发，通过hover等动作，或者结合js进行触发。animation可以自行运行
3、transition可控性相对较弱，只能够指定起始和结束的状态，而animation可以定义多个关键帧
4、动画在运行结束之后，需要回到初始状态
5、transition的作用，可以用一句话来概括“平滑改变CSS值”
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

二、使用第三方类实现动画

自己写类样式太麻烦？那你你可以配合使用第三方 CSS 动画库，如 Animate.css。

animate.css 官方链接




  
  Vue-animate.css
  
  


  
    
    
      Hello Wolrd

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定，我们可以通过 duration 属性来定制我们的动画时长

使用 :duration="毫秒值" 来统一设置入场和离场时候的动画时长
使用 :duration="{ enter: 200, leave: 400 }" 来分别设置入场的时长和离场的时长

三、钩子函数实现动画

在过渡钩子函数中使用 JavaScript 直接操作 DOM，过渡钩子函数的第一个参数 el 表示要执行动画的那个 DOM 元素，是原生的 JS DOM 对象。

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

案例：使用钩子函数模拟小球半场动画




  
  Vue-

案例效果

四、使用第三方 JavaScript 动画库实现动画

用 Velocity.js 实现 JavaScript 动画的一个很棒的选择。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

官方案例：

案例效果

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡，说白了就是在第一次渲染的时候才会起作用的动画效果。
这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名实现初始渲染过渡：

或是自定义 JavaScript 钩子实现初始渲染过渡：

案例：




 
 初始渲染的过渡
 




 
  appear

初始渲染的过渡

多个元素的过渡

最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：


  
    
  
  Sorry, no items found.

可以这样使用，但是有一点需要注意：

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置 key 是一个更好的实践。
示例：

在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如：

可以重写为：


  

// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}

过渡模式

如下例子：在 “on” 按钮和 “off” 按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是的默认行为 - 进入和离开同时发生。




  
  多个元素过渡

运行结果

如果我们让在元素绝对定位在彼此之上：




  
  多个元素过渡

那么就可以有这样更为正常的效果：

运行结果

我们加上 translate 让它们运动像滑动过渡：




  
  多个元素过渡

运行结果

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式：

in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
用 out-in 重写之前的开关按钮过渡：




  
  多个元素过渡

运行结果

in-out 滑动淡出demo如下：




  
  多个元素过渡

运行结果

多个组件过渡

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反，我们只需要使用动态组件：

运行结果

列表过渡

在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup。
通过为 transition-group 元素，设置 tag 属性，可以指定 transition-group 渲染为指定的元素。如果不指定 tag 属性，默认渲染为标签。
列表渲染时，过渡模式不可用，因为我们不再相互切换特有的元素。
如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性。

列表的进入、离开过渡

下面是一个列表的进入、离开的简单例子：




  
  列表过渡



  
    
    
    
      
        {{ item }}

运行结果

不过，这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡，我们下面会解决这个问题。

列表的排序过渡

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。




  
  列表的排序过渡



  
    
    
      
        {{ item }}

运行结果

这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列
使用 transforms 将元素从之前的位置平滑过渡新的位置。

我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡。

运行结果

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中。

列表的交错过渡

通过 data 属性与 JavaScript 通信，就可以实现列表的交错过渡




  
  列表的交错过渡


  
  
    
    
      
        {{ item.msg }}

运行结果

可复用的过渡

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将或者作为根组件，然后将任何子组件放置在其中就可以了。
使用 template 的简单例子：

Vue.component('my-special-transition', {
  template: '
    
      
    
  ',
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})

函数式组件更适合完成这个任务：

Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})

动态过渡

在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name 特性来绑定动态值。

当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画在不同过渡间切换会非常有用。

所有过渡特性都可以动态绑定，但我们不仅仅只有特性可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。




  
  动态过渡


  

  
    Fade In: 
    Fade Out: 
    
      hello

执行结果

7. Vue 动画

一、使用过渡类名实现动画

CSS 过渡

Hello World

CSS 动画

二、使用第三方类实现动画

Hello Wolrd

三、钩子函数实现动画

四、使用第三方 JavaScript 动画库实现动画

初始渲染的过渡

多个元素的过渡

过渡模式

多个组件过渡

列表过渡

列表的进入、离开过渡

列表的排序过渡

列表的交错过渡

可复用的过渡

动态过渡

你可能感兴趣的:(7. Vue 动画)