Vuejs2.0学习笔记-过渡&动画

2019独角兽企业重金招聘Python工程师标准>>>

即：一个样式到另一个样式的过渡(动画)效果

Vue在插入、删除、更新DOM时，通过多种不同方式的应用过渡效果。但是本质上还是使用CSS3动画，transition、animation等，或者以下工具：

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

基本用法介绍如下：

1. 使用transition组件(即标签)，将要执行动画的元素包含在该组件内

<div v-cloak id="app">
    <button @click="show=!show">Toggle</button>
    <transition name="fade">
        <p v-if="show">{{message}}</p>
    </transition>
</div>

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

• 自动嗅探目标元素是否应用了CSS过渡或动画，如果是，在恰当的时机添加/删除CSS类名(6个，分别为v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active, v-leave-to)，其中当<transition>没有名字，则v-是这6个类名的默认前缀，如果使用了name, 则用真实的name值。
• 如果过渡组件提供了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动画/过渡，或者javascript，则DOM操作在下一帧中立即执行。

引入第三方CSS库：animate.css

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

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <p v-if="show">{{message}}</p>
</transition>

• 效果可以参见官网：https://daneden.github.io/animate.css/

多元素动画：使用transition-group以及:key=指定

<transition-group>
    <p :key=1 v-if="show">{{message}}</p>
    <p :key=2 v-if="show">{{message}}</p>
</transition-group>

转载于:https://my.oschina.net/maliang1989/blog/3017513