首頁 > web前端 > Vue.js > 主體

淺談Vue中v-for,key取值影響過渡效果與動畫效果(程式碼詳解)

奋力向前
發布: 2021-08-19 10:07:57
轉載
1921 人瀏覽過

之前的文章《教你怎麼使用Vue實現動畫效果(附程式碼)》中,跟大家介紹怎麼使用Vue實現動畫效果。以下這篇文章給大家了解一下淺談Vue中key取值影響過渡效果和動畫效果,有需要的朋友可以參考一下,希望對你們有幫助。

淺談Vue中v-for,key取值影響過渡效果與動畫效果(程式碼詳解)

關於Vue.jsv-forkey的順序改變,影響過渡動畫表現

關於Vue.jsv-forkey的取值,影響過渡動畫表現這個問題是在寫Message元件出現的,先看程式碼部分

子元件:

<!-- Notice: -->
<transition :name="transitionName" @enter="enter" @leave="leave">
  ...... ..
</transition>
<!-- JS: -->
<script>
  export default {
    methods: {
      enter(e) {
        e.style.height = e.scrollHeight + "px";
      },
      leave(e) {
        e.style.height = 0;
      },
    },
  };
</script>
<!-- CSS: -->
<style>
  transition: all 0.2s ease-in-out;
</style>
登入後複製

父元件:

<notice v-for="(item, index) in notices" :key="index">
  ......
</notice>
登入後複製

#JS

data() {
    return {
      notices: []
    };
  },
  //notices 新增的时候自动加入定时器来移除
  setTimeout(() => {
    let index = 0 //这里假设我已经取得了移除的 index索引, 可能不是依次的123456
    this.notices.splice(index, 1);
  }, time) //time 为传入的随机不等值
登入後複製

理論上當某一個子元件被移除時,他會有一個流暢的高度從1 0到過度動畫,但是不然,每次移除時,動畫每次只會應用到最後一個。百思不解,各種jscss實作都不是很理想。依然一卡一卡的。 

又去官網把文件翻了一遍。找出了問題所在。 for遍歷的時候,有一個值很重要:keykey取值為Number時,每次陣列都改變, dom會重新渲染,所以動畫每次只會影響最後一個。

key取值為String時,每次陣列改變,dom則預設用「就地重複使用」策略

所以把key改為String時,則就是我想要當結果,流暢的依次性的執行了動畫,完美官網的例子https://cn.vuejs.org/v2/guide /list.html#key

這裡要注意的是,key的取值為String/Number#,所以測試時key值為了避免不重複,應該取值為隨機的不重複string/number, 不要使用預設的index 。

[完]

推薦學習:JavaScript影片教學

#

以上是淺談Vue中v-for,key取值影響過渡效果與動畫效果(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:chuchur.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!