Vue技巧-在Vue3中让元素在滚动视图上淡入

.container{width:80%;最小宽度：450px；保证金：0自动；}.fade-in{背景颜色：#2ecc71;高度：500px；底部边距：50px；不透明度：0；transition:0.3s全部缓出；变换：比例（0.8）；框大小：边框框；填充：20px；显示：内联块；}.full-width{宽度：100%；}.half-width{宽度：47.5%；}.half-width:nth-of-type(2n+1){margin-right:2.5%;}.half-width:nth-of-type(2n){margin-left:2.5%;}除了视差组件和滚动事件之外，添加响应式触摸的一个好方法是让元素在滚动视图上淡入。在本技巧中，我将向您展示如何使用滚动事件和CSS转换在Vue3中实现此功能。这是我们将在本教程中学习如何构建的内容的屏幕截图。为我们的fadin元素设置样式我们要做的第一件事是构建模板并为组件设置样式。在这个例子中，我们将使用空白块来说明事情是如何工作的。所以，在我们的模板中，我们只想...将容器包装一些全角元素一些半角元素添加一些变化然后，为了给它们设置样式，我们构建了一个基本的容器，然后用一些填充、颜色和适当的宽度来设置我们的块的样式。.container{width:80%;最小宽度：450px；保证金：0自动；}.fade-in{背景颜色：#2ecc71;高度：500px；底部边距：50px；不透明度：0；transition:0.3s全部缓出；变换：比例（0.8）；框大小：边框框；填充：20px；显示：内联块；}.full-width{宽度：100%；}.half-width{宽度：47.5%；}.half-width:nth-of-type(2n+1){margin-right:2.5%;}.half-width:nth-of-type(2n){margin-left:2.5%;}需要注意的一件事是，我们所有的淡入元素都以默认的0不透明度开始，我们将使用脚本来处理它们，我们还将更改元素的比例。事实上，我们的淡入元素被赋予了一个过渡属性，这意味着当我们改变不透明度和比例时，它会在我们的两个值之间平滑过渡——给我们想要的平滑效果。所以，如果我们加载我们的页面，我们不应该看到任何东西-但我们应该能够向下滚动我们的页面，因为我们的元素就在那里，只是完全透明。让我们用一些Javascript让它可见。让我们的元素淡入在本教程中，我们将使用Vue3CompositionAPI-因此，在脚本中，我们将首先创建设置方法并导入一些生命周期挂钩。然后，我们创建一个所有淡入元素的数组。我们可以使用document.getElementsByClassName来做到这一点——但是，这会返回一个HTMLCollection，而我们需要一个数组，因此我们可以使用Javascript的Array.from方法进行转换。onMounted(()=>{fadeInElements=Array.from(document.getElementsByClassName('fade-in'))})现在我们有了一个包含所有要淡入的元素的数组，我们想做这样的事情：遍历它们。确定元素是否可见。如果是，将其淡入并从数组中移除首先，我们要在组件挂载（mounted）时创建滚动监听器，并在组件卸载（unmounted）时移除它。我们做的另一件事是在安装组件时调用handleScroll方法，这样用户无需滚动即可加载某些内容。varfadeInElements=[]onMounted(()=>{fadeInElements=Array.from(document.getElementsByClassName('fade-in'))document.addEventListener('scroll',handleScroll)handleScroll()})onUnmounted(()=>{document.removeEventListener('scroll',handleScroll)})在滚动监听器中，让我们创建一个for循环，循环遍历我们创建的淡入元素数组。consthandleScroll=(evt)=>{for(vari=0;i{varrect=el.getBoundingClientRect()varelemTop=rect.top+200//200=buffervarelemBottom=rect.bottomreturnelemTop=0}backInside滚动事件侦听器，我们想知道每个元素的isElemVisible助手是否为真。如果是这样，我们更改元素的不透明度和比例，然后将其从数组中删除。对于(vari=0;i