目錄

• transition鉤子函式
• 自定義過渡類名
• transition-group使用
• 小結

先看一個示例

程式碼如下

<template>
  <div align="center" style="margin-top: 100px;">
    <button @click="show= !show" >測試</button>
    <transition>
      <div v-if="show">
        <p>這是一段文字</p>
hnCVXhafa      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'transitionTest',data () {
    return {
      show: true
    }
  }
}
</script>
<style scoped>
    .v-enter-active,.v-leave-active {
    transition: all .5s ;
    }
    .v-enter {
    transform: translateY(50px);
    opacity: 0;
    }
    .v-leave-active {
    transform: translateY(50px);
    opacity: .5;
    }
</style>

包裹了一個div元件，點選按鈕實現動畫效果。一般搭配v-if、v-show、動態元件、元件根節點來使用。

transition鉤子函式

transition提供六個鉤子函式，提供給我們在不同時機編寫相應的動畫效果。以下是此六個鉤子函式執行時機

1.v-enter：進入過渡開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。

2.v-enter-active：進入過渡生效時的狀態。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。

3.v-enter-to:進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。

4.v-leave: 離開過渡的開始狀態。在離開過渡被http://www.cppcns.com

5.v-leave-active：離開過渡生效時的狀態。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。

6.v-leave-to:離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 vhnCVXhafa-leave 被刪除)，在過渡/動畫完成之後移除

自定義過渡類名

在頁面中有多個地方需要進行過渡效果，如果使用提供的預設那6個鉤子函式，那麼所有要過渡地方的過渡效果都是一樣的。如果需要在不同的場合定義不同的動畫效果，就需要我們自己定義專屬於各個過渡效果的類名。解決辦法給transition標籤新增name屬性，在name屬性中寫入自己的類名字首。例如，那麼在使用類名的時候就是這樣的：.my-trans-leave、.my-trans-enter-to。如：

    <transition name="my-trans" mode="out-in">
       <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>

style寫法，my-trans是“.my-tranwww.cppcns.coms-enter-active”的字首

<style>
  .my-trans-enter-active,.my-trans-leave-active {
    transition: all .2s;
    opacity: 1;
  }
  .my-trans-enter {
    transition: all .2s;
    opacity: 0;
  }
  .my-trans-leave-to {
    transition: all .2s;
    opacity: 0;
  }  
</style>

transition-group使用

對列表進行過渡渲染時，就必須使用transition-group元素包裹。點選列表中內容，按照以下動畫移除，示例如下

<template>
  <div class="main_">
    <transition-group name="slide">
      <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </transition-group>
  </div>
</template>
<script>
export dehttp://www.cppcns.comfault {
  name: 'transitionGroupTest',data () {
    return {
      list: [{
        id: 1,name: '紅燒魚'
      },{
        id: 2,name: '炒土豆'
      },{
        id: 3,name: '燒茄子'
      }
      ]
    }
  },methods: {
    del (i) {
      this.list.splice(i,1)
    }
  }
}
</script>
<style scoped>
  .main_css {
    margin-left: 50px;
    margin-top: 50px;
  }
  .slide-enter-active {
    transition: all .5s linear;
  }
  .slide-leave-active {
    transition: all .1s linear;
  }
  .slide-enter {
    transform: translateX(-100%);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(110%);
    opacity: 0;
  }
</style>

小結

過度與動畫，使用transition標籤完成，同時提供6個鉤子函式。全域性動畫在app.vue中，在router-view元件中包裹transition，如：；給transition標籤新增name屬性定義過渡類名，實現區域性變化。

以上就是詳解vue過度與動畫transition使用示例的詳細內容，更多關於vue過度與動畫transition的資料請關注我們其它相關文章！