响应式图片延迟加载 Vue.js

是一个内置组件，用于对 v-for 列表中元素或组件的插入、删除和顺序更改进行动画处理。

和区别

支持基本相同的 props、CSS 转换类和 hook 监听器，但有以下区别：

提示

在 中使用时，组件名称需要写成。

进入/退出动画

下面是将进入/离开动画添加到 v-for 列表的示例：

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  li>
TransitionGroup>

CSS

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

在任意位置添加项目 在任意位置删除项目

移动动画

上面的例子有一些明显的缺陷：当插入或删除一个项目时，它周围的元素会立即“跳跃”，而不是平滑移动。 我们可以通过添加一些额外的 CSS 规则来解决这个问题：

CSS

.list-move, 
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}


.list-leave-active {
  position: absolute;
}

现在看起来好多了，甚至洗牌整个列表的动画也非常流畅：

添加删除重新排序

渐进式延迟列表动画

通过读取钩子中元素的数据，我们可以实现渐进式延迟的列表动画。 首先，我们将每个元素的索引渲染为该元素上的数据：

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  li>
TransitionGroup>

接下来，在钩子中，我们根据当前元素的数据为元素的进入动画添加延迟。 以下是基于以下内容的动画示例：

js

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

参考