Vue.js <TransitionGroup>用法及代碼示例

為列表中的多個元素或組件提供過渡效果。

屬性

<TransitionGroup> 接受與 <Transition> 相同的道具，除了 mode 外，還有兩個額外的道具：

interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {
  /**
   * If not defined, renders as a fragment.
   */
  tag?: string
  /**
   * For customizing the CSS class applied during move transitions.
   * Use kebab-case in templates, e.g. move-class="xxx"
   */
  moveClass?: string
}

事件

<TransitionGroup> 發出與 <Transition> 相同的事件。

細節

默認情況下，<TransitionGroup> 不呈現包裝 DOM 元素，但可以通過 tag 屬性定義。

請注意，<transition-group> 中的每個孩子都必須是 uniquely keyed 才能使動畫正常工作。

<TransitionGroup> 支持通過 CSS 變換移動過渡。當孩子在屏幕上的位置在更新後發生變化時，它將應用一個移動的 CSS 類(從 name 屬性自動生成或使用 move-class 屬性配置)。如果在應用移動類時 CSS transform 屬性為 "transition-able"，則元素將使用 FLIP technique 平滑地動畫到其目的地。

示例

<TransitionGroup tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

相關用法

注：本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 <TransitionGroup>。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。