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，翻译：公众号《前端全栈开发者》