關于Vue.js的v-for，key的順序改變，影響過渡動畫表現

only_do 發布于2019-08-20 15:08 / 908人閱讀

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

昨天寫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;
}

可以把代碼復制到jsfiddle運行，這樣寫出來的fadeout動畫永遠作用于最后一個元素而不是被點擊元素
關鍵在于這句

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

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

GPU云服務器云服務器關于JAVA中順序IO的基本操作翻轉過渡動畫 ios過渡動畫 jquery過渡動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82017.html

Vue.js進入/離開&列表過度動畫。

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

thekingisalwaysluc 2019-08-23 15:23 評論0 收藏0
VUE2.0學習筆記

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

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

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

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

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

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

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

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