Vue学习——3、过渡&动画

一、进入/离开 & 列表过渡

1.1概述：

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

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

暂时只涉及进入、离开和列表的过渡。

1.2单元素/组件的过渡：https://cn.vuejs.org/v2/guide/transitions.html#单元素-组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开的过渡效果。

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

示例：

  
    Toggle
  
  
    
hello
  

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

1.3列表过渡：https://cn.vuejs.org/v2/guide/transitions.html#列表过渡

使用  组件，组件的特点：

• 不同于 ，它会用一个真实元素呈现过渡效果：默认为一个 。你也可以通过 tag attribute 更换为其他元素来展现过渡效果。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部过渡元素总是需要提供唯一的 key attribute 值。
• CSS 过渡的类将会应用在内部的过渡元素中，而不是这个组/容器本身。

tag：transition-group指定用什么html标签呈现过渡效果，即用什么html标签包裹列表，默认是，当列表中是

标签时，tag为ol或ul。

1.3.1列表的排序过渡：

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

v-move 对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：

  Shuffle
  
    

      {{ item }}
    
  

new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

.flip-list-move {
  transition: transform 1s;
}

                                                                                                                                                                                               

二、状态过渡：略