css變量實現滾動條控制動畫

原創

2022-04-30 09:31

原理：

① 定義一個數組，數組裏麪包含每張圖片的引用以及它們進入、進入完成、離開、完成離開時的百分比

② 監聽頁面滾動，算出當前的滾動進度

③ 遍歷數組，根據當前進度修改圖片的狀態，修改圖片的--progress屬性值

for (const { ele, inEnter, inLeave, outEnter, outLeave } of animeList) {
  if (progress >= outLeave) {
    ele.className = 'out-leave'
    ele.style.setProperty('--progress', 0)
  }
  else if (progress >= outEnter) {
    ele.className = 'out-enter'
    ele.style.setProperty('--progress', (progress - outEnter) / (outLeave - outEnter))
  }
  else if (progress >= inLeave) {
    ele.className = 'in-leave'
    ele.style.setProperty('--progress', (progress - inLeave) / (outEnter - inLeave))
  }
  else if (progress >= inEnter) {
    ele.className = 'in-enter'
    ele.style.setProperty('--progress', (progress - inEnter) / (inLeave - inEnter))
  }
  else {
    ele.className = ''
    ele.style.setProperty('--progress', 1)
  }
}

④ 樣式表裏設置每張圖片的在每個狀態（in-enter、in-leave、out-enter、out-leave）的位置和透明度，比如：

#hair-1-1 {
  transform: translate(-86px, calc(-138px - 280px));
  opacity: 0;

  &.in-enter {
    transform: translate(-86px, calc(-138px - 280px * (1 - var(--progress))));
    opacity: calc(var(--progress) * 1.5);
  }

  &.in-leave {
    transform: translate(-86px, -138px);
    opacity: 1;
  }

  &.out-enter {
    transform: translate(-86px, -138px);
    opacity: calc(1 - var(--progress));
  }

  &.out-leave {
    transform: translate(-86px, -138px);
    opacity: 0;
  }
}