關(guān)于Vue.js的v-for，key的順序改變，影響過渡動畫表現(xiàn)

only_do 發(fā)布于2019-08-20 15:08 / 926人閱讀

摘要：如果數(shù)據(jù)項的順序被改變，將不是移動元素來匹配數(shù)據(jù)項的順序，而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。

昨天寫Vue遇到個問題...代碼如下
html


  
    
      {{ item }}

javascript

new Vue({
  el: "#list-demo",
  data: {
    noteContent: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    click: function(index) {
      this.noteContent.splice(index, 1);
    }
  }
})

css

.itemlist-enter-active,
.itemlist-leave-active {
  transition: all 1s;
}

.itemlist-enter,
.itemlist-leave-active {
  opacity: 0;
}

可以把代碼復(fù)制到j(luò)sfiddle運行，這樣寫出來的fadeout動畫永遠(yuǎn)作用于最后一個元素而不是被點擊元素
關(guān)鍵在于這句

https://cn.vuejs.org/v2/guide...
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認(rèn)用 “就地復(fù)用” 策略。如果數(shù)據(jù)項的順序被改變，Vue將不是移動 DOM 元素來匹配數(shù)據(jù)項的順序，而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。

如果用index當(dāng)key，v-for會重新渲染（但是不知道為什么動畫一定作用于最后一個元素），所以，請保持key的唯一性，而且！不能改變！
雖然看著好像渲染出來很占位置，但是也只能這樣了？

云服務(wù)器 GPU云服務(wù)器關(guān)于JAVA中順序IO的基本操作翻轉(zhuǎn)過渡動畫 ios過渡動畫 jquery過渡動畫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82017.html

相關(guān)文章

Vue.js進(jìn)入/離開&列表過度動畫。

摘要：包括以下工具在過渡和動畫中自動應(yīng)用可以配合第三方動畫庫，如在過渡鉤子函數(shù)中使用直接操作可以配合使用第三方動畫庫，如在這里，我們只會講到進(jìn)入離開和列表的過渡。不僅可以進(jìn)入和離開動畫，還可以改變定位。概述 Vue在插入、更新或則移除DOM時，提供多種不同方式的應(yīng)用過渡效果。包括以下工具： *在CSS過渡和動畫中自動應(yīng)用class *可以配合第三方CSS動畫庫，如Animate.css *...

thekingisalwaysluc 2019-08-23 15:23 評論0 收藏0
VUE2.0學(xué)習(xí)筆記

摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。差別在哪里將特性名轉(zhuǎn)換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素，可以使用包裹。 1.前言安裝直接用引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 評論0 收藏0
vue過度動畫的使用方法整理

摘要：事件有效六個過度類名簡單地說就是會伴隨的整個過程，與存在的時長只都有一幀，所以用肉眼看與幾乎是同時出現(xiàn)，同時消失的。未觸發(fā)效果觸發(fā)效果，因為所以在他之后的都上移位置發(fā)生改變未觸發(fā)效果，過度開始時改變位置才有效 transition props name： - string，用于自動生成 CSS 過渡類名。例如：name: fade 將自動拓展為.fade-enter，.fade-en...

xiaolinbang 2019-08-29 15:05 評論0 收藏0
vue.js起步式（二）

摘要：當(dāng)需要和第三方的動畫庫，比如配合時會非常有用顯式聲明過渡類型新增需要給過渡元素添加事件偵聽器來偵聽過渡何時結(jié)束。在下例中我們使用注冊一個自定義的過渡元素已被插入在動畫結(jié)束后調(diào)用與相同然后用特性中漸近過渡與一起用時可以創(chuàng)建漸近過渡。 8.方法與事件處理器方法處理器可以用 v-on 指令監(jiān)聽 DOM 事件： Greet 我們綁定了一個單擊事件處理器到一個方法 greet。下面在...

BearyChat 2019-08-20 10:29 評論0 收藏0
Vue.js Guide Essentials-說人話-速記版

摘要：以下內(nèi)容根據(jù)部分速記。同時，需要在父組件標(biāo)簽中添加這個屬性，該屬性才能傳遞到子組件內(nèi)。把父組件傳遞的數(shù)據(jù)當(dāng)做子組件的初始值。以下內(nèi)容根據(jù)Vue.js Guide Essentials部分速記。不含動畫/mixin/SSR/路由/狀態(tài)管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開始聲明式...

Sanchi 2019-08-21 18:38 評論0 收藏0