VUE中的TransitionGroup在添加，刪除或重新訂購操作期間為動態(tài)列表提供平滑的動畫； 1）使用包裝列表元素，使用唯一：鍵（最好是穩(wěn)定ID）; 2）將元素prop（vue 3）設(shè)置為控制包裝器標籤（例如，元素=“ ul”）; 3）應(yīng)用過渡類別，例如。 4）使用.List-Move與過渡：轉(zhuǎn)換以啟用平滑的翻轉(zhuǎn)動畫； 5）對於乾淨的去除，請施加位置：絕對對.LIST-LEAVE-EACTIVE和位置：相對於容器，以防止佈局跳躍； 6）使用CSS @keyframes來進行複雜的休假效果，例如淡出； 7）對於交錯的輸入動畫，請通過基於索引的JavaScript鉤或動態(tài)樣式應(yīng)用TransitionDelay； 8）確保初始渲染不會觸發(fā)過渡，除非使用出現(xiàn)。通過適當?shù)腃SS和密鑰管理，TransitionGroup提供了專業(yè)的響應(yīng)列表過渡。

當您需要動畫動態(tài)列表或被添加，刪除或重新排序的動畫列表或元素時，使用TransitionGroup處理動畫非常有用。與基本的Transition組件（對於單個元素）不同， TransitionGroup在多個元素上工作，並為列表過渡提供了特殊的行為。

這是有效使用TransitionGroup方法：

什麼是過渡組？

TransitionGroup是一種內(nèi)置的VUE組件，用於應(yīng)用列表中的元素插入，刪除或重新排序時應(yīng)用過渡或動畫。它呈現(xiàn)為真實的DOM元素（默認情況下a <span></span> ），但是您可以使用tag prop（在VUE 2中）或element prop（在VUE 3中）更改標籤。

注意：在VUE 3中， tag被element替換。

基本用法

用<transitiongroup></transitiongroup>包裝您的列表，並應(yīng)用過渡類：

 <模板>
  <div>
    <button @click =“ additem”>添加項目</button>

    <transitiongroup name =“ list” tag =“ ul”>
      <li v-for =“項目中的項目”：key =“ item.id”>
        {{item.text}}
        <button @click =“ removeItem（item.ID）”>刪除</button>
      </li>
    </transitiongroup>
  </div>
</template>

<腳本設(shè)置>
從&#39;vue&#39;導(dǎo)入{ref}

const項目= ref（[[
  {id：1，文本：&#39;item 1&#39;}，
  {id：2，文字：&#39;item 2&#39;}
）））

令I(lǐng)D = 3
const additem =（）=> {
  items.value.push（{id：id，text：`item $ {id -1}`}）
}

const removeEtem =（id）=> {
  items.value = items.value.filter（item => item.id！== id）
}
</script>

添加CSS過渡

現(xiàn)在定義過渡樣式。 name="list"屬性生成以下類：

• .list-move - 在運動期間應(yīng)用（重新排序）
• .list-enter-from??
• .list-leave-from??

但是注意：對於重新排序， .list-move是關(guān)鍵類 - 它控制流動的移動。

 。
  過渡：所有0.5 s selice;
}

.list-enter-from。
  不透明度：0;
  變換：Translatex（30px）;
}

/ *確保離開物品不會影響佈局 */
.list-leave-active {
  位置：絕對；
}

重要的是：為了平滑地排序，請確保容器允許移動。您可能需要使用position: relative容器和position: absolute離開項目以避免跳躍。

處理順利進行重新排序

當列表變化時，使項目平穩(wěn)地滑入新位置：

• 使用.list-move與過渡
• Vue會使用翻轉(zhuǎn)動畫自動應(yīng)用此類（更新之前和之後，測量位置）

例子：

 .list-move {
  過渡：變換0.5s易於;
}

這使得物品在中間插入或刪除項目時，將物品滑入到位。

處理休假動畫和佈局

刪除物品時，如果不處理，它們可能會導(dǎo)致列表跳躍。最佳實踐：

• 申請position: absolute要離開項目，以便其餘的列表可以順利重新定位
• 保持容器的position: relative

 .list-leave-active {
  位置：絕對；
  Z-Index：0;
}

.list-leave-to {
  不透明度：0;
  變換：比例尺（0.6）;
}

/ *容器保留佈局 */
ul {
  位置：相對；
  填充：0;
  列表風(fēng)格：無；
}

使用CSS動畫而不是過渡

您也可以使用@keyframes來獲得更複雜的效果：

 .list-leave-active {
  動畫：淡出0.5s的淡入0.5秒；
}

@keyframes vade out {
  到 {
    不透明度：0;
    變換：翻譯（15px）;
  }
}

高級：交錯的輸入動畫

對於交錯的條目（例如，每個項目接一個地出現(xiàn)一個），您不能直接在使用TransitionGroup的CSS中執(zhí)行此操作，但是您可以使用JavaScript掛鉤：

 <過渡組
  名稱=“列表”
  tag =“ ul”
  @trefer-appear =“ onbeforeappear”
  @出現(xiàn)=“ onappear”
  @after-appear =“ onafterAppear”
>
  <li
    v-for =“項目中的項目”
    ：key =“ item.id”
    ：data-delay =“ item.delay”
  >
    {{item.text}}
  </li>
</transitiongroup>

然後在JavaScript中應(yīng)用延遲：

功能onBeforeAppear（el）{
  El.Style.opacity = 0
  const delay = el.dataset.delay || 0
  el.style.transitiondelay =`$ {delay} ms`
}

功能onappear（el，完成）{
  //等待下一幀觸發(fā)過渡
  requestAnimationFrame（（）=> {
    El.Style.opacity = 1
  }））
}

或更好：使用CSS和基於索引的延遲通過動態(tài)樣式appear 。

要記住的要點

• 始終使用唯一的:key （最好是穩(wěn)定ID，而不是索引）
• TransitionGroup呈現(xiàn)一個真實元素 - set element="div"或element="ul"
• .move類僅在項目更改位置時應(yīng)用
• 對於光滑的休假動畫，請使用position: absolute離開物品
• 除非您appear

基本上， TransitionGroup可以使您對列表動畫進行良好的控制 - 只需將其與適當?shù)腃SS和密鑰管理結(jié)合使用。這不是魔術(shù)，但是有了正確的設(shè)置，您可以獲得光滑，專業(yè)的清單過渡。

以上是如何使用Vue中的過渡組處理動畫的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！