vue筆記四

時間  2019-11-17
標籤 vue 筆記 简体版
原文   原文鏈接

十一.過渡與動畫

1.使用限制
Vue 提供了 transition 的封裝組件，在下列情形中，能夠給任何元素和組件添加 entering/leaving 過渡
條件渲染 (使用 v-if)
條件展現 (使用 v-show)
動態組件
組件根節點javascript

 

2.示例css

<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 將會作如下處理：html

a.自動嗅探目標元素是否應用了 CSS 過渡或動畫，若是是，在恰當的時機添加/刪除 CSS 類名。
b.若是過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
c.若是沒有找到 JavaScript 鉤子而且也沒有檢測到 CSS 過渡/動畫，DOM 操做 (插入/刪除) 在下一幀中當即執行。(注意：此指瀏覽器逐幀動畫機制，和 Vue 的 nextTick 概念不一樣)vue

 

4.在進入/離開的過渡中，會有 6 個 class 切換java

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

5.css過渡
經常使用的過渡都是使用 CSS 過渡。less

代碼示例:ide

<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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程