首页天道酬勤vue.js是什么(vue nodejs)

vue.js是什么(vue nodejs)

admin 12-02 02:36 211次浏览

一个好的网站应该回应用户的互动。一个很好的方法是回应某人向下滚动你的页面。

除了视差组件和滚动事件,添加响应触摸的一个好方法是在滚动视图时让元素淡入。

在这篇每日提示中,我介绍了如何在Vue3中使用滚动事件和CSS转换来实现这个功能。

这是我们将在本教程中学习如何构建的截图。

本教程的效果

样式化我们的fadin元素

我们需要做的第一件事是构建模板并设置组件样式。在这个例子中,我们将使用空白块来说明事情是如何工作的。

因此,在我们的模板中,我们只想.

包装容器容器的一些全宽元素和一些半宽元素,以添加一些更改模板。

div class='container '

div class='淡入全宽'/

div class='淡入全宽'/

div class='半宽淡入'/

div class='半宽淡入'/

/div

/template然后,为了给它们设置样式,我们需要构建一个基本的容器,然后使用一些填充、颜色和适当的宽度来为我们的块设置样式。

样式范围。集装箱

宽度:80%;

最小宽度: 450 px;

margin: 0 auto

}。淡入{

背景-color : # 2ec c71;

高度: 500 px;

边距-底部: 50px;

opa city 3360 0;

transition: 0.3s全部缓解;

transform:刻度(0.8);

盒子尺寸:边框盒子;

padding: 20px

display:内联块;

}。全宽{

宽度: 100%;

}。半宽{

宽度:47.5%;

}。半宽:n型(2n 1){ 0

保证金-右侧: 2.5%;

}。半宽:n型(2n) {

保证金-左侧: 2.5%;

}

/style需要注意的一点是,我们所有的淡入元素都以默认的不透明度0开始。我们将使用脚本来处理它们,我们还将改变元素的比例。

事实上,我们的淡入元素被赋予了一个过渡属性,这意味着当我们改变不透明度和比例时,它将在我们的两个值之间平滑过渡——,以给我们期望的平滑效果。

因此,如果我们加载我们的页面,我们不应该看到任何——,但我们应该能够向下滚动我们的页面,因为我们的元素在那里,只是完全透明的。

让我们使用一些Javascript使它可见。

使我们的元素淡入

Vue3组合应用编程接口

在本教程中,我们将使用Vue3合成API——。因此,在脚本中,我们将首先创建设置方法并导入一些生命周期挂钩。

脚本

从“vue”导入{ onMounted,onUnmounted }

导出默认值{

设置(){ 0

onMounted(()={ 0

})

onUnmounted(()={ 0

})

}

}

/script然后,我们创建一个包含所有淡入元素的数组。我们可以使用文档。getelementsbyclassname来实现这一点——然而,这将返回HTMLCollection,并且我们需要一个数组,因此我们可以使用Javascript。

Array.from 方法进行强制转换。

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

现在我们有了一个要淡入的所有元素的数组,我们想要做一些事情:

每当视图被滚动时,就会在它们上面迭代。确定元素是否可见。如果是的话,将其淡入并从数组中删除

首先,我们要在安装(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项目中。


如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!

雷士灯具管理系统
css子元素选择器(元素选择器有哪些) spring框架是什么(spring调用接口)
相关内容