vue元素實現(xiàn)動畫過渡效果

更新時間：2017年07月01日 10:30:14 作者：rayman_v

這篇文章主要介紹了vue元素實現(xiàn)動畫過渡效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1 在 vue 中，使用 <transition> 標簽包含著的單個子元素在使用 v-show 或 v-if 切換顯示隱藏前，會先判斷是否有對應的 class 樣式能匹配到該子元素上：

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redv-leave { margin-top: 50px; }
  redv-leave-active { transition: all 3s;}
  redv-leave-to { margin-top: 100px; opacity: 0;}
  redv-enter { margin-top: 50px; }
  redv-enter-active { transition: all 3s;}
  redv-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<div id="app">
  <transition>
    <div class="red" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
</script>
</body>

v-leave 當前元素準備從顯示轉變成隱藏，在動畫開始前添加到元素上，動畫一旦開始會立即刪除；
v-leave-active 在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用于設置過渡的效果；
v-leave-to 在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用于設置動畫最終的效果；

事例中，當點擊 button，div 并不會馬上 display: none，而是首先設置 v-leave ，下一刻即刪除 v-leave ，同時添加 v-leave-active v-leave-to，當 v-leave-active 中的過渡時間執(zhí)行完成，則刪除 v-leave-active v-leave-to，同時添加 display: none。

v-enter 當前元素準備從隱藏轉變成顯示，在動畫開始前添加到元素上，動畫一旦開始會立即刪除；
v-enter-active 在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用于設置過渡的效果；
v-enter-to 在動畫過渡過程中，元素一直擁有該樣式，直到動畫結束則自動刪除，用于設置動畫最終的效果；

事例中，當點擊 button，div 馬上清除 display: none，然后設置 v-enter ，下一刻即刪除 v-enter ，同時添加 v-enter-active v-enter-to，當 v-enter-active 中的過渡時間執(zhí)行完成，則刪除 v-enter-active v-enter-to。

2 自定義動畫類名：

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redslide-leave { margin-top: 50px; }
  redslide-leave-active { transition: all 3s;}
  redslide-leave-to { margin-top: 100px; opacity: 0;}
  redslide-enter { margin-top: 50px; }
  redslide-enter-active { transition: all 3s;}
  redslide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<div id="app">
  <transition name="slide">
    <div class="red" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>

該效果與上一例效果完全一致的，transition 元素可以使用 name 屬性來指定使用的類名前綴，從而代替 v-字段，例如事例中的 name="slide" 使本來的 v-enter 變成了 slide-enter。

3 transition 與 animation 同時使用時

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  blue {background-color: blue; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s; animation: aslide 5s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<div id="app">
  <transition type="transition" >
    <div class="red" v-show="show"></div>
  </transition>
  <br>
  <transition type="animation" >
    <div class="blue" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>

事例中，動畫同時指定了 transition 和 animation 動畫， transition 元素的 type 屬性可以指定以哪種動畫的時間為元素的結束時間，如果不指定動畫監(jiān)控的方式，則會以最長時間的為準。

4 javascript 監(jiān)聽動畫

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<div id="app">
  <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"
    >
    <div class="red" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow; 
      consolelog('-----------click---------');
    },
    beforeEnter: function (el) {
      consolelog('beforeEnter:');
    },
    enter: function (el, done) {
      consolelog('enter:');
      // done()
    },
    afterEnter: function (el) {
      consolelog('afterEnter:');
    },
    enterCancelled: function (el) {
      consolelog('enterCancelled:');
    },
    beforeLeave: function (el) {
      consolelog('beforeLeave:');
    },
    leave: function (el, done) {
      consolelog('leave:');
      done()
    },
    afterLeave: function (el) {
      consolelog('afterLeave:');
    },
    leaveCancelled: function (el) {
      consolelog('leaveCancelled:');
    }
  }
});
</script>

一旦使用 js 事件，原 css 動畫過渡效果就會無效，官方推薦在 <div class="red" v-show="show"></div> 上設置 v-bind:css="false" 可令 vue 內部機制免去監(jiān)測 css 動畫事件回調，提高性能。
enter 和 leave 事件需手動調用 done 方法，不然事件一直不會調用后續(xù)的 after 事件，沒有調用 after 事件但是又有其他事件開始了，則被視為動畫被 cancel 了。

5 頁面初始化時的動畫：

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  apper { margin-top: 50px; }
  apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
</style>
<body>
<div id="app">
  <transition
    appear 
    appear-class="apper" 
    appear-active-class="apper-active" 
    v-on:before-appear="customBeforeAppearHook"
    v-on:appear="customAppearHook"
    v-on:after-appear="customAfterAppearHook" >
    <div class="red" ></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow; 
      consolelog('-----------click---------');
    },
    customBeforeAppearHook: function (el) {
      consolelog('customBeforeAppearHook:');
    },
    customAppearHook: function (el) {
      consolelog('customAppearHook:');
      // done()
    },
    customAfterAppearHook: function (el) {
      consolelog('customAfterAppearHook:');
    }
  }
});
</script>

appear 屬性表示開啟初始化動畫，appear-class 屬性指定初始化前的樣式，appear-active-class 屬性指定初始化動畫過程的樣式；
transition 動畫無法在初始化動畫中起效，而 animation 動畫則可以；
before-appear appear after-appear 是事件回調，看事例相當清晰。

6 動畫元素的 key ：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter-active { transition: all 15s;}
  v-enter-to { margin-top: 100px;}
  v-leave-active { transition: all 15s;}
  v-leave-to { margin-top: 10px;}
</style>
<body>
<div id="app">
  <div class="show1">
    <transition>
      <button v-if="show1" @click="show1 = false">on</button>
      <button v-else @click="show1 = true">off</button>
    </transition>
  </div>
  <div class="show2">
    <transition>
      <button v-if="show2" key="on" @click="show2 = false">on</button>
      <button v-else key="off" @click="show2 = true">off</button>
    </transition>
  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    show1: true,
    show2: true
  }
});
</script>

show1 為什么沒有動畫效果呢？因為 vue 會把切換中的兩個 button 識別成同一個元素，只是修改了 button 中的不同內容，所以實際上頁面并沒有發(fā)生 DOM 元素的切換；

如果要讓 vue 明確識別出這是2個不同的 button 元素，則為每個元素指定不同的 key 屬性的值。

7 元素切換的動畫模式：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 5s;}
  v-enter-to { margin-left: 10px;}
  v-leave { margin-left: 10px;}
  v-leave-active { transition: all 5s;}
  v-leave-to { margin-left: 100px;}
</style>
<body>
<div id="app">
  <div class="default">
    <transition>
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </div>
  <div class="inout">
    <transition mode="in-out">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </div>
  <div class="outin">
    <transition mode="out-in">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
});
</script>

transition 默認是同時執(zhí)行2個元素的切換動畫的，案例中紅色的 off 按鈕其實是會同時向左移動的，只是因為布局上沒有脫離布局流，被 on 按鈕頂住，無法移動；
mode="in-out" 可以使切換元素先執(zhí)行將要顯示元素的動畫，再執(zhí)行將要隱藏元素的動畫；
mode="out-in" 可以使切換元素先執(zhí)行將要隱藏元素的動畫，再執(zhí)行將要顯示元素的動畫；

8 多元素動畫：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 2s;}
  v-enter-to { margin-left: 10px;}
</style>
<body>
<div id="app">
  <transition-group>
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <transition-group tag="ul">
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemspush(itemslength)">add</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    items: [0,1]
  }
});
</script>

transition 里面只能放置單個元素或使用 v-if v-show 切換的單個元素，要想使用多個元素的動畫，必須使用 transition-group；
transition-group 默認會在 DOM 里渲染成 span 標簽，可使用 tag="ul" 指定渲染成其他標簽；
transition-group 必須為每一個子元素指定 key；

8 多元素的位移動畫：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-move { transition: all 1s; }
</style>
<body>
<div id="app">
  <transition-group tag="ul" >
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemsreverse()">reverse</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    items: [0,1,2,3]
  }
});
</script>

transition-group 允許在每個元素移動時，添加 v-move 的樣式，移動完成后自動清除該樣式；
transition 的屬性， transition-group 都有，包括 name enter leave；

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3實現(xiàn)手機上可拖拽元素的組件
這篇文章主要介紹了vue3實現(xiàn)手機上可拖拽元素的組件，用vue3實現(xiàn)一個可在手機上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣
2022-09-09
Vuex之理解state的用法實例
本篇文章主要介紹了Vuex之理解state的用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
vue中的生命周期及鉤子函數(shù)
這篇文章主要介紹了vue中的生命周期及鉤子函數(shù),Vue?實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據、編譯模板、掛載?Dom、渲染,下面文章詳細介紹,需要的朋友可以參考一下
2021-12-12
Vue3實現(xiàn)SSE(Server-Sent?Events)連接
SSE?是一種允許服務器向瀏覽器推送事件的技術,這篇文章主要為大家詳細介紹了如何通過vue3實現(xiàn)SSE(Server-Sent?Events)連接,有需要的小伙伴可以了解下
2024-10-10
vue2實現(xiàn)搜索結果中的搜索關鍵字高亮的代碼
這篇文章主要介紹了vue2實現(xiàn)搜索結果中的搜索關鍵字高亮的代碼,需要的朋友可以參考下
2018-08-08
vue3中的reactive、readonly和shallowReactive使用詳解
在 Vue3 中,可以使用 shallowReactive 函數(shù)創(chuàng)建一個淺層響應式對象,它接收一個普通對象作為參數(shù),返回一個淺層響應式代理對象,本文給大家介紹vue3中的reactive、readonly和shallowReactive使用,感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue中v-for指令完成列表渲染
這篇文章主要給大家分享的是vue中v-for指令完成列表渲染，下面文化章就圍繞中v-for的相關資料在Vue中列表渲染做個簡單總結和使用演示,需要的朋友可以參考一下，希望對大家有所幫助
2021-11-11
解決vue項目打包后提示圖片文件路徑錯誤的問題
這篇文章主要介紹了解決vue項目打包后提示圖片文件路徑錯誤的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-07-07
Vue全局事件總線$bus安裝與應用小結
這篇文章主要介紹了Vue全局事件總線$bus安裝與應用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09
Electron+vite+vuetify項目搭建的流程和方法
最近想用Electron來進行跨平臺的桌面應用開發(fā),同時想用vuetify作為組件,于是想搭建一個這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項目搭建的流程和方法,感興趣的朋友一起看看吧
2024-06-06