vue筆記四

阿新 • • 發佈：2017-09-17

vuejs 動畫將在 done 們的觸發 city sca nim

十一.過渡與動畫

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

vue筆記四

vuejs 動畫將在 done 們的觸發 city sca nim 十一.過渡與動畫 1.使用限制Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加 entering/leaving 過渡條件渲染 (使用 v-if)條件展示 (使用

vue筆記四

十一.過渡與動畫

vue筆記四

Vue.js實戰學習筆記四（v-bind及class與style綁定）

Django REST framework+Vue 打造生鮮電商專案（筆記四）

Django REST framework+Vue 打造生鮮電商項目（筆記四）

如何輸出格式化的字符串（學習筆記四）

cocos2d-x-3.1 國際化strings.xml解決亂碼問題 (coco2d-x 學習筆記四)

【Unity 3D】學習筆記四十二：粒子特效

VUe 筆記

Tomcat學習筆記(四)

JavaWeb學習筆記四 request&response

Swift 筆記 (四) —— 集合類型

hibernate筆記(四)

java 核心學習筆記(四) 單例類

Python學習筆記(四)

vue筆記二

Vue筆記五

Django開發筆記四

Java字符串整理筆記(四)

筆記四

vue筆記

vue筆記四

十一.過渡與動畫

相關推薦