效果圖：

blockLoading.gif

參考效果地址

代碼如下：

<template>
  <div>
    <!-- 網頁模塊過渡效果 -->
    <div class="block" v-for="(j,indexj) in 7" :key="indexj">
      <div class="title">BLOCK {{j}}</div>
      <div class="content">
        <span
          v-for="(i,index) in 4"
          :key="index"
          :class="getClassName(j)"
          :style="`background:hsl(${210-j*30}, 100%, ${random(63,90)}%); transition-delay: ${i/10}s`"
        >{{j}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: null // block標簽列表
    }
  },
  mounted() {
    this.items = document.querySelectorAll('.block')
    this.handleScroll()
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    //判斷 模塊 是否達到可視范圍
    isElementInViewport(el) {
      // getBoundingClientRect()用于獲得頁面中某個元素的左据某，上，右和下分別相對瀏覽器視窗的位置聘鳞。
      // 注意：如果模塊的整體寬或高 大于 瀏覽器可視窗口 的時候听怕，此方法不可使用
      var rect = el.getBoundingClientRect()
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <=
          (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <=
          (window.innerWidth || document.documentElement.clientWidth)
      )
    },
    //監(jiān)聽滾輪方法
    handleScroll(val) {
      //每次滾輪滾動都會遍歷 模塊數組践樱，從而添加樣式
      this.items.forEach(i => {
        if (this.isElementInViewport(i)) {
          //如果 模塊 達到可視范圍，那么添加樣式
          i.classList.add('in-view')
        } else {
          //每次滾動時都會出現過度效果
          //定義過渡效果加載一次還是多次，注釋為一次雅倒，解注釋為多次
          // i.classList.remove('in-view')
        }
      })
    },
    // m~n之間的隨機整數
    random(m, n) {
      return Math.floor(Math.random() * (n - m + 1) + m)
    },
    //定義特殊的樣式(此處只是方便實現效果，具體可自己定義)
    getClassName(num) {
      if (num == 1) {
        return 'toScaleBig'
      } else if (num == 2) {
        return 'toTop'
      } else if (num == 3) {
        return 'toBottom'
      } else if (num == 4) {
        return 'toLeft'
      } else if (num == 5) {
        return 'toRight'
      } else if (num == 6) {
        return 'toRoate'
      } else if (num == 7) {
        return 'toScaleSmall'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  cursor: default;
  width: 100%;
  max-width: 200px;
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transition: 0.5s;
  position: relative;
  .title {
    font-size: 2rem;
    font-weight: 200;
    padding: 20px;
    opacity: 0;
    transition: 0.5s;
    transform: scale(0.5);
  }
  .content {
    span {
      display: inline-block;
      width: 100px;
      height: 100px;
      font-weight: bold;
      line-height: 100px;
      color: white;
      font-size: 3rem;
      transition: 0.5s;
      opacity: 0;
    }
    //自定義的相關過度效果
    .toScaleBig {
      transform: scale(0.5);
    }
    .toTop {
      transform: translateY(50px);
    }
    .toBottom {
      transform: translateY(-50px);
    }
    .toLeft {
      transform: translateX(50px);
    }
    .toRight {
      transform: translateX(-50px);
    }
    .toRoate {
      transform: rotate(45deg);
    }
    .toScaleSmall {
      transform: scale(1.5);
    }
  }
}

.in-view {
  opacity: 1;
  .title {
    opacity: 1;
    transform: scale(1);
  }
  .content {
    span {
      opacity: 1;
    }
    //自定義的相關最終效果
    .toScaleBig {
      transform: scale(1);
    }
    .toTop {
      transform: translateY(0px);
    }
    .toBottom {
      transform: translateY(0px);
    }
    .toLeft {
      transform: translateX(0px);
    }
    .toRight {
      transform: translateX(0px);
    }
    .toRoate {
      transform: rotate(0deg);
    }
    .toScaleSmall {
      transform: scale(1);
    }
  }
}
</style>