Vue技巧 | 在Vue3中使元素在滾動視圖時淡入

除了視差組件和滾動事件外，添加響應式觸摸的一種好方法是使元素在滾動視圖時淡入。

在本技巧中，將介紹如何使用滾動事件和CSS轉換在Vue3中實現此功能。

這是咱們將學習如何在本教程中進行構建的屏幕截圖。

---

Vue3相關文章：

• Vue 3教程（適用於Vue 2用戶）
• Vue3 Composition API如何替換Vue Mixins
• Vue3 Composition API中的提取和重用邏輯
• 如何在Vue2與Vue3中構建相同的組件
• Vue3中的Vue Router初探

---

樣式化咱們的fadin元素

咱們要作的第一件事是構建模板並設置組件樣式。在此示例中，咱們將使用空白塊來講明事情如何進行。

所以，在咱們的模板中，咱們只想...

• 包裝容器 container
• 一些full-width元素
• 一些half-width元素添加一些變化

<template>
  <div class='container'>
    <div class='fade-in full-width' />
    <div class='fade-in full-width' />
    <div class='half-width fade-in' />
    <div class='half-width fade-in' />
  </div>
</template>
複製代碼

而後，要對它們進行樣式設置，咱們要構建一個基本的容器，而後使用一些填充，顏色和適當的寬度來對咱們的塊進行樣式設置。

<style scoped> .container { width: 80%; min-width: 450px; margin: 0 auto; } .fade-in { background-color: #2ecc71; height: 500px; margin-bottom: 50px; opacity: 0; transition: 0.3s all ease-out; transform: scale(0.8); box-sizing: border-box; padding: 20px; display: inline-block; } .full-width{ width: 100%; } .half-width { width: 47.5%; } .half-width:nth-of-type(2n + 1) { margin-right: 2.5%; } .half-width:nth-of-type(2n) { margin-left: 2.5%; } </style>
複製代碼

須要注意的一件事是，咱們全部的淡入元素均以默認不透明度0開始，咱們將使用腳原本處理它們，咱們還將改變元素的比例。

事實上，咱們的淡入元素被賦予了一個過渡屬性，這意味着當咱們改變不透明度和比例時，它將在咱們的兩個值之間平滑地過渡——給咱們想要的平滑效果。

因此，若是咱們加載咱們的頁面，咱們不該該看到任何東西——但咱們應該可以向下滾動咱們的頁面，由於咱們的元素就在那裏，只是徹底透明。

讓咱們使用一些Javascript使其可見。

使咱們的元素淡入

在本教程中，咱們將使用Vue3 Composition API——所以，在腳本中，咱們首先要建立 setup 方法並導入一些生命週期hooks。

<script>
import { onMounted, onUnmounted } from 'vue'
export default {
  setup () {

    onMounted(() => {

    })

    onUnmounted(() => {

    })
  }
}
</script>
複製代碼

而後，咱們建立一個包含全部淡入元素的數組。咱們能夠使用 document.getElementsByClassName 進行此操做-可是，這將返回 HTMLCollection，而且咱們須要一個數組，所以咱們能夠使用Javascript的 Array.from 方法進行強制轉換。

onMounted(() => {
  fadeInElements = Array.from(document.getElementsByClassName('fade-in'))
})
複製代碼

如今咱們有了一個要淡入的全部元素的數組，咱們想要作一些事情：

1. 每當視圖被滾動時，就會在它們上面迭代。
2. 肯定元素是否可見。
3. 若是是的話，將其淡入並從數組中刪除

首先，咱們要在安裝（mounted）組件時建立滾動偵聽器，並在卸載（unmounted）組件時將其刪除。咱們要作的另外一件事是，在安裝組件時調用 handleScroll 方法，以便加載某些內容，而無需用戶滾動查看內容。

var fadeInElements = []

onMounted(() => {
  fadeInElements = Array.from(document.getElementsByClassName('fade-in'))
  document.addEventListener('scroll', handleScroll)
  handleScroll()
})

onUnmounted(() => {
  document.removeEventListener('scroll', handleScroll)
})
複製代碼

在滾動偵聽器中，讓咱們建立一個 for 循環，用於遍歷咱們建立的淡入元素數組。

const handleScroll = (evt) => {
  for (var i = 0; i < fadeInElements.length; i++) {
    var elem = fadeInElements[i]
  }
}
複製代碼

此時，咱們須要某種輔助方法來肯定元素是否可見。爲此，咱們將使用元素的bounding rectangle 返回元素相對於視口的大小和位置。

咱們還要添加一個小的緩衝區，因此在淡入以前，至少有 200px 的元素必須是可見的。這將真正加強效果，由於它能夠確保網站訪問者能看到正在發生的事情。若是沒有這個緩衝區，咱們的淡入過渡會在咱們元素的1個像素出如今屏幕上時觸發，而大部分的元素會在視口以外。

const isElemVisible = (el) => {
  var rect = el.getBoundingClientRect()
  var elemTop = rect.top + 200 // 200 = buffer
  var elemBottom = rect.bottom
  return elemTop < window.innerHeight && elemBottom >= 0
}
複製代碼

回到滾動事件偵聽器內部，咱們想了解每一個元素的 isElemVisible 幫助法是否爲 true。若是是這樣，咱們要更改元素的不透明度和比例，而後將其從數組中刪除。

for (var i = 0; i < fadeInElements.length; i++) {
  var elem = fadeInElements[i]
  if (isElemVisible(elem)) {
    elem.style.opacity = '1'
    elem.style.transform = 'scale(1)'
    fadeInElements.splice(i, 1) // 只讓它運行一次
  }
}
複製代碼

如今，若是咱們回到咱們的應用程序中去檢查一下，你會發現，當咱們滾動時，元素會變得清晰可見。這正是咱們想要的！

若是你願意，咱們就完成了！

因而，咱們就有了咱們一直在尋找的淡入滾動效果！有不少方法能夠擴展這個效果，好比說。

• 滾動時使元素淡出，以即可以再次淡入。
• 使用CSS動畫代替過渡，增長更多的高級動畫。
• 將邏輯提取到自定義指令中，以即可以在整個項目中重複使用。

只要你掌握了滾動偵聽器和CSS animations/transitions 的竅門，那麼你就能作到無懈可擊。

我但願你學到了一兩件事，而且能夠想到一些很酷的方法來將其中一些技術添加到本身的Vue項目中。

---

來源：itnext.io，做者：Matt Maribojoc，翻譯：公衆號《前端全棧開發者》