阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js transition-group

      transition-group

      • Props

        • tag - string,默认为 span
        • move-class - 覆盖移动过渡期间应用的 CSS 类。
        • 除了 mode,其他特性和 <transition> 相同。
      • 事件

        • 事件和 <transition> 相同。

      用法

      <transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>,可以通过 tag 属性配置哪个元素应该被渲染。

      注意,每个 <transition-group> 的子节点必须有 独立的 key ,动画才能正常工作

      <transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新,从屏幕上的位置发生变化,它会被应用一个移动中的 CSS 类 (通过 name 属性或配置 move-class 属性自动生成)。如果 CSS transform 属性是“可过渡”属性,当应用移动类时,将会使用 FLIP 技术 使元素流畅地到达动画终点。

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

      参考

      过渡:进入,离开和列表

      目录
      目录