vue-学习笔记-过分动画

 

速记：

1:transition 组件,对v-show,v-if,动态组件,组件根节点使用

 

 

 

 

 

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

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

• 能够配合使用第三方 CSS 动画库，如 Animate.css

• 在过渡钩子函数中使用 JavaScript 直接操做 DOM

• 能够配合使用第三方 JavaScript 动画库，如 Velocity.js

 

1. CSS过渡 transition
2. CSS 动画,CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会当即删除，而是在 animationend 事件触发时删除。

3. 自定义过渡的类名:他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其余第三方 CSS 动画库，如 Animate.css结合使用十分有用。

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

 

 

单元素/组件的过渡

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

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

 

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

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

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

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

       若是你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。

       若是你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

 

 

 

过渡的类名：在进入/离开的过渡中，会有 6 个 class 切换。

 

 

CSS动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会当即删除，而是在 animationend 事件触发时删除。 

 

 

 

自定义过渡的类名

---

 咱们能够经过如下特性来自定义过渡类名：

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

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其余第三方 CSS 动画库，如 Animate.css结合使用十分有用。

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

 

同时使用过渡和动画:须要指定type="animation/animationend"

---

 Vue 为了知道过渡的完成，必须设置相应的事件监听器。它能够是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。

若是你使用其中任何一种，Vue 能自动识别类型并设置监听。

可是，在一些场景中，你须要给同一个元素同时设置两种过渡动效，好比 animation 很快的被触发并完成了，而 transition 效果还没结束。

在这种状况中，你就须要使用 type 特性并设置 animation 或 transition 来明确声明你须要 Vue 监听的类型。

1

 

显性的过渡持续时间:2.2.0 新增

---

 1: <transition :duration="1000">...</transition>

 2: <transition :duration="{ enter: 500, leave: 800 }">...</transition>

 

 

 

JavaScript 钩子

---

<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>

// ...
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) {
    // ...
  }
}

 

这些钩子函数能够结合 CSS transitions/animations 使用，也能够单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。不然，它们将被同步调用，过渡会当即完成。

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

 

---

 

1. 初始化渲染的过渡，就是页面一刷新就进入过渡渲染:

不管是 appear 特性仍是 v-on:appear 钩子都会生成初始渲染过渡

 

 

 

 

多个元素的过渡

---

 

 对于原生标签可使用 v-if/v-else 。最多见的多标签过渡是一个列表和描述这个列表为空消息的元素：尽可能使用key

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

 

 

过渡模式

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

 在元素绝对定位在彼此之上的时候运行正常：

同时生效的进入和离开的过渡不能知足全部要求，因此 Vue 提供了 过渡模式

• in-out：新元素先进行过渡，完成以后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成以后新元素过渡进入。

用 out-in 重写以前的开关按钮过渡：

 模式不是常常用到，但对于一些稍微不一样的过渡效果仍是有用的

<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>in-out

多个组件的过渡:不须要key ,使用is

 

列表的进入/离开过渡:<transition-group>

 

 

 

列表的排序过渡

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

 

列表的交错过渡

 

可复用的过渡:

过渡能够经过 Vue 的组件系统实现复用。要建立一个可复用过渡组件，你须要作的就是将 <transition> 或者 <transition-group> 做为根组件，而后将任何子组件放置在其中就能够了。

Vue.component('my-special-transition', {
  template: '\
    <transition\
      name="very-special-transition"\
      mode="out-in"\
      v-on:before-enter="beforeEnter"\
      v-on:after-enter="afterEnter"\
    >\
      <slot></slot>\
    </transition>\
  ',
  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)
  }
})

 

 

动态过渡