響應式圖片延遲加載 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
  })
}

參考