1、演示

2、介紹

這個(gè)指令不是原生自帶的，需要手動(dòng)去書寫，但是這輩子只需要編寫這一次就好了，后邊可以反復(fù)利用。

3、關(guān)鍵API

IntersectionObserver?

IntersectionObserver 是一個(gè)用于監(jiān)測(cè)元素是否進(jìn)入或離開視口（viewport）的 API。它可以幫助你在頁面滾動(dòng)時(shí)或者元素位置改變時(shí)進(jìn)行回調(diào)操作，這樣你就可以根據(jù)元素是否可見來觸發(fā)動(dòng)作或者動(dòng)畫效果。

使用 IntersectionObserver 的基本步驟如下：

1. 創(chuàng)建一個(gè) IntersectionObserver 對(duì)象，并指定一個(gè)回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)會(huì)在被觀察的元素進(jìn)入或離開視口時(shí)被調(diào)用。

2. 使用 observe() 方法開始觀察指定的元素。你可以同時(shí)觀察多個(gè)元素。

3. 在回調(diào)函數(shù)中處理元素的可見狀態(tài)變化。根據(jù)元素的可見性狀態(tài)來執(zhí)行相應(yīng)的操作，比如觸發(fā)動(dòng)畫、加載內(nèi)容等。

4. 在不需要觀察元素時(shí)，使用 unobserve() 方法停止觀察。

以下是一個(gè)簡(jiǎn)單的示例代碼，演示了如何使用 IntersectionObserver 來監(jiān)測(cè)元素的可見性：文章來源地址http://www.zghlxwxcb.cn/news/detail-848200.html

// 創(chuàng)建一個(gè) IntersectionObserver 對(duì)象
const observer = new IntersectionObserver((entries) => {
  // 遍歷觀察到的所有元素
  entries.forEach(entry => {
    // 如果當(dāng)前元素進(jìn)入視口
    if (entry.isIntersecting) {
      // 執(zhí)行相應(yīng)的操作，比如觸發(fā)動(dòng)畫
      entry.target.classList.add('animate');
      // 停止觀察當(dāng)前元素，可根據(jù)需求決定是否停止觀察
      observer.unobserve(entry.target);
    }
  });
});

// 要觀察的目標(biāo)元素
const targetElement = document.querySelector('.target');

// 開始觀察目標(biāo)元素
observer.observe(targetElement);

4、Vue文件代碼

<template>
  <div class="container">
    <div v-slide-in class="item" v-for="item in 10">{{ item }}</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item {
  width: 50%;
  height: 200px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px 0px;
}
.item:nth-child(1) {
  background-color: rgb(87, 139, 19);
}
.item:nth-child(2) {
  background-color: rgb(33, 139, 19);
}
.item:nth-child(3) {
  background-color: rgb(139, 19, 35);
}
.item:nth-child(4) {
  background-color: rgb(139, 19, 87);
}
.item:nth-child(5) {
  background-color: rgb(139, 19, 135);
}
.item:nth-child(6) {
  background-color: rgb(91, 19, 139);
}
.item:nth-child(7) {
  background-color: rgb(19, 133, 139);
}
.item:nth-child(8) {
  background-color: rgb(221, 218, 40);
}
.item:nth-child(9) {
  background-color: rgb(173, 139, 115);
}
.item:nth-child(10) {
  background-color: rgb(29, 28, 27);
}
</style>

5、指令文件及代碼注釋（清晰明了）

// WeakMap是一種鍵值對(duì)的集合
// 這里用來將一個(gè)dom元素和一種動(dòng)畫對(duì)應(yīng)起來
const map = new WeakMap()

// 創(chuàng)建一個(gè)觀察對(duì)象
const ob = new IntersectionObserver(entries => {
  // 遍歷所有被觀察的元素 entries為一個(gè)數(shù)組
  for (const entry of entries) {
    // 判斷該元素是否與視口相交（出現(xiàn)在視口里面了）
    if (entry.isIntersecting) {
      // 判斷目標(biāo)元素是出現(xiàn)在上視口還是下視口
      if (entry.boundingClientRect.top > entry.rootBounds.top) {
        // 找出這個(gè)元素對(duì)應(yīng)的動(dòng)畫
        const animation = map.get(entry.target)
        if (animation) {
          // 播放該元素的動(dòng)畫
          animation.play()
        }
      }
    }
  }
})
// 輔助函數(shù),用來判斷頁面上的元素是否在視口外
function isBelowViewport(el) {
  const rect = el.getBoundingClientRect()
  return rect.top > window.innerHeight
}

export default function (app) {
  app.directive('slideIn', {
    mounted(el, bindings) {
      // 如果元素已經(jīng)在視口內(nèi)了，直接return 不加動(dòng)畫
      if (!isBelowViewport(el)) return
      //  創(chuàng)建一個(gè)動(dòng)畫  animate是Vue自帶的
      const animation = el.animate(
        [
          // 數(shù)組的每一個(gè)對(duì)象都表示關(guān)鍵幀 相當(dāng)于css中的 @keyframes 這里想寫多少個(gè)就寫多少個(gè)
          {
            transform: `translateY(${200}px)`,
          },
          {
            transform: `translateY(0px)`,
          },
        ],
        // duration：執(zhí)行時(shí)間  easing：動(dòng)畫效果，fill:動(dòng)畫結(jié)束過后的行為  這些跟css中的一樣
        { duration: 1000, easing: 'ease-in-out', fill: 'forwards' }
      )
      // 一開始的時(shí)候讓動(dòng)畫暫停，這里只是先定義好
      animation.pause()
      // 當(dāng)元素進(jìn)入視口的時(shí)候在進(jìn)行動(dòng)畫播放
      ob.observe(el)
      // 存儲(chǔ)鍵值
      map.set(el, animation)
    },
    // 在元素卸載時(shí)，取消觀察
    unmounted(el) {
      ob.unobserve(el)
    },
  })
}

到了這里，關(guān)于前端開發(fā)攻略---Vue通過自定義指令實(shí)現(xiàn)元素平滑上升的動(dòng)畫效果（可以自定義動(dòng)畫時(shí)間、動(dòng)畫效果、動(dòng)畫速度等等）。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！