html/css 滾動到元素位置，顯示載入動畫

每次滾動到元素時，都顯示載入動畫，如何新增？

 

元素新增初始引數

以上圖中的動畫為例，新增倆個左右容器，將內容放置在容器內部。

新增初始資料，預設透明度0、左右分別移動100px。

  //左側容器
  .item-leftContainer {
    opacity: 0;
    transform: translateX(-100px);
  }
  //右側容器
  .item-rightContainer {
    opacity: 0;
    transform: translateX(100px);
  }

新增動畫資料

在less中新增動畫資料。這裡只設定了to，也可以省略第1步中的初始引數設定而在動畫裡設定from。

執行後，透明度由0到1，倆個容器向中間移動100px回到原處。

  //動畫
  @keyframes showLeft {
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  @keyframes showRight {
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  @keyframes hideLeft {
    to {
      opacity: 0;
      transform: translateX(-100px);
    }
  }
  @keyframes hideRight {
    to {
      opacity: 0;
      transform: translateX(100px);
    }
  }

觸發動畫

頁面載入/重新整理觸發 - 在componentDidMount中執行

頁面滾動時觸發 - 在componentDidMount、componentWillUnmount新增監聽/登出頁面滾動的事件

校驗當前滾動高度與元素的位置差異：

window.pageYOffset（滾動距離） + windowHeight（視窗高度） > leftElement.offsetTop （元素的相對位置）+ parentOffsetTop（父元素的相對位置） + 200

1. 真正的滾動視覺位置 - window.pageYOffset（滾動距離） + windowHeight（視窗高度）
2. 元素距離頂部的高度 - 這裡使用了leftElement.offsetTop + parentOffsetTop，原因是父容器使用了absolute絕對定位。如果是正常佈局的話，使用元素當前的位置leftElement.offsetTop即可
3. 額外新增200高度，是為了優化視覺體驗。當超出200高度時才觸發動畫

當頁面滾動到下方，觸發顯示動畫；當頁面重新滾動到上方，觸發隱藏動畫。

    componentDidMount() {
        this.checkScrollHeightAndLoadAnimation();
        window.addEventListener('scroll', this.bindHandleScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (event) => {
        this.checkScrollHeightAndLoadAnimation();
    }
    checkScrollHeightAndLoadAnimation() {
        const windowHeight = window.innerHeight;
        let parentEelement = document.getElementById("softwareUsingWays-container") as HTMLElement;
        const parentOffsetTop = parentEelement.offsetTop;
        let leftElement = (parentEelement.getElementsByClassName("item-leftContainer") as HTMLCollectionOf<HTMLElement>)[0];
        if (window.pageYOffset + windowHeight > leftElement.offsetTop + parentOffsetTop + 200) {
            leftElement.style.animation = "showLeft .6s forwards" //新增動畫  
        } else {
            leftElement.style.animation = "hideLeft 0s forwards" //隱藏動畫 
        }
        let rightElement = (parentEelement.getElementsByClassName(".item-rightContainer") as HTMLCollectionOf<HTMLElement>)[0];
        if (window.pageYOffset + windowHeight > rightElement.offsetTop + parentOffsetTop + 200) {
            rightElement.style.animation = "showRight .6s forwards" //新增動畫  
        } else {
            rightElement.style.animation = "hideRight 0s forwards" //隱藏動畫 
        }
    }

 

關鍵字：React 滾動、載入/出現動畫