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>。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。