vue笔记四

十一.过渡与动画

1.使用限制
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

2.示例

<template>
  <div id="app">
    <button @click="show = !show">单击我</button>
    <transition name="fade">
      <p v-if="show">Hello</p>
    </transition>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'app',
  components: {Child},
  data () {
    return {
      show: true
    }
  }
}
</script>

<style lang="less">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
</style>

　　

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

a.自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
b.如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
c.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

4.在进入/离开的过渡中，会有 6 个 class 切换

a.v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
b.v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
c.v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
d.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
e.v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 f.transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
h.v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

ps:
对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition name="my-transition"> 可以重置前缀，比如 v-enter 替换为 my-transition-enter。

5.css过渡
常用的过渡都是使用 CSS 过渡。

代码示例:

<template>
  <div id="app">
    <button @click="show = !show">单击我</button>
    <transition name="slide-fade">
      <p v-if="show">Hello</p>
    </transition>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'app',
  components: {Child},
  data () {
    return {
      show: true
    }
  }
}
</script>

<style lang="less">
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

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

示例代码:

<template>
  <div id="app">
    <button @click="show = !show">单击我</button>
    <transition name="bounce">
      <p v-if="show">Hello</p>
    </transition>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'app',
  components: {Child},
  data () {
    return {
      show: true
    }
  }
}
</script>

<style lang="less">
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

　　

7.自定义过渡的类名

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 结合使用十分有用。

8.显性设置过渡时间

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

　　

9.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 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

　　

ps:
当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。

10.初始渲染的过渡

默认情形下对于第一次加载,不使用过渡或动画,要改变这一点,可以附加appear特性

<transition appear>
  <!-- ... -->
</transition>

　　

appear也可以自定义css类名和自定义javascript钩子

11.多元素过渡

示例:

<transition>
    <button v-if="docState === 'saved'" key="saved">
      Edit
    </button>
    <button v-if="docState === 'edited'" key="edited">
      Save
    </button>
    <button v-if="docState === 'editing'" key="editing">
      Cancel
    </button>
  </transition>

　　

但这样子显得颇为繁琐,精简如下:

<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>

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

　　

完整代码:

<template>
  <div id="app">
    <transition name="bounce">
  <button v-bind:key="docState" @click="onClick">
    {{ buttonMessage }}
  </button>
</transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      docState: 'edited'
    }
  },
  methods: {
    onClick () {
      switch (this.docState) {
        case 'saved':
          this.docState = 'edited'
          break
        case 'edited':
          this.docState = 'saved'
          break
      }
    }
  },
  computed: {
    buttonMessage: function () {
      switch (this.docState) {
        case 'saved': return 'Edit'
        case 'edited': return 'Save'
        case 'editing': return 'Cancel'
      }
    }
  }
}
</script>

<style lang="less">
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

　　

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

in-out：新元素先进行过渡，完成之后当前元素过渡离开。(新元素入完成后,当前元素出)
out-in：当前元素先进行过渡，完成之后新元素过渡进入(当前元素出完成后,新元素入)

示例代码:

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
  <button v-bind:key="docState" @click="onClick">
    {{ buttonMessage }}
  </button>
</transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      docState: 'edited'
    }
  },
  methods: {
    onClick () {
      switch (this.docState) {
        case 'saved':
          this.docState = 'edited'
          break
        case 'edited':
          this.docState = 'saved'
          break
      }
    }
  },
  computed: {
    buttonMessage: function () {
      switch (this.docState) {
        case 'saved': return 'Edit'
        case 'edited': return 'Save'
        case 'editing': return 'Cancel'
      }
    }
  }
}
</script>

<style lang="less">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
</style>

　　

13.多个组件过渡

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

　　

更多详细可参考:
https://cn.vuejs.org/v2/guide/transitions.html