querySelectorAll && getBoundingClientRect
querySelectorAll && getBoundingClientRect
我在使用 JavaScript querySelectorAll () 方法时遇到问题。
我想对两个段落 (p) 标签产生淡入淡出效果,它们最初都将不透明度设置为 0,并进行 transform: translateY 15vh 将它们向下移动一点,我希望段落出现在在屏幕底部,在用户向下滚动期间,return 的不透明度为 1,transform:translateY 为 0。
我创建了一个名为 scrollAppear() 的函数,里面有很多东西..
function scrollAppear()
首先,我有一个 变量 paragraphsToFade,其中包含带有 class“paragraphs_to_fade”的两个段落;
我使用 querySelectorAll 方法来获取具有 class (.paragraphs_to_fade).
的两个 (p) 标签
这个return我一个数组(nodeList)..
var paragraphsToFade=document.querySelectorAll(".paragraphs_to_fade");
然后我想访问段落的坐标Y,为了实现这个我使用了方法getBoundingClientRect().top,即return在这种情况下,指定元素的顶部 相对于 window 的顶部。
我将值存储在名为 paragraphsPosition;
的变量中
但是要获得两个 (p) 元素的坐标 Y,我必须循环进入 for 循环并指定 [i] 变量,该变量将像这样放置两个值永远循环迭代:
for (let i = 0; i < paragraphsToFade.length; i++) {
var paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
}
之后,我创建了一个名为 screenSize 的变量,它可以访问 window 高度:
var screenSize=window.innerHeight;
然后我用 if/else 语句检查一个条件,检查元素的顶部值是否小于 window 的高度,如果为真,则添加 class fadeInAnimation,这将重置不透明度为 1 和 transform: translateY 为 0,过渡为 1s,正如我在解释开始时指定的那样。
var screenSize=window.innerHeight;
if(paragraphsPosition < screenSize){
paragraphsToFade.classList.add("fadeInAnimation");
}
最后我只是调用函数滚动出现,当用户滚动 window :
window.addEventListener("scroll",scrollAppear);
我不知道为什么,但是当我使用 querySelector 并且我只有一个段落时淡入淡出效果有效,但是当我使用 querySelectorAll 并且我想抓取多个段落时,它不起作用,也许我不要循环太棒或其他东西,我在不同的地方使用 console.log 试图知道发生了什么,但我不明白为什么?
我在教程中看到了这种淡入淡出效果:
https://www.youtube.com/watch?v=C_JKlr4WKKs
看到这个 fiddle,您正在将 class 附加到一个包含多个元素的对象,而不是每个元素本身。
当您遍历数组时,将 class 包含在 for 循环中的元素中
function scrollAppear(){
var paragraphsToFade = document.querySelectorAll(".paragraphs_to_fade");
var paragraphsPosition;
for (let i = 0; i < paragraphsToFade.length; i++) {
paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
var screenSize=window.innerHeight;
if(paragraphsPosition < screenSize && !paragraphsToFade[i].classList.contains("fadeInAnimation") ){
paragraphsToFade[i].classList.add("fadeInAnimation");
console.log('added class');
}
}
}
window.addEventListener("scroll",scrollAppear);
我在使用 JavaScript querySelectorAll () 方法时遇到问题。
我想对两个段落 (p) 标签产生淡入淡出效果,它们最初都将不透明度设置为 0,并进行 transform: translateY 15vh 将它们向下移动一点,我希望段落出现在在屏幕底部,在用户向下滚动期间,return 的不透明度为 1,transform:translateY 为 0。
我创建了一个名为 scrollAppear() 的函数,里面有很多东西..
function scrollAppear()
首先,我有一个 变量 paragraphsToFade,其中包含带有 class“paragraphs_to_fade”的两个段落; 我使用 querySelectorAll 方法来获取具有 class (.paragraphs_to_fade).
的两个 (p) 标签这个return我一个数组(nodeList)..
var paragraphsToFade=document.querySelectorAll(".paragraphs_to_fade");
然后我想访问段落的坐标Y,为了实现这个我使用了方法getBoundingClientRect().top,即return在这种情况下,指定元素的顶部 相对于 window 的顶部。
我将值存储在名为 paragraphsPosition;
的变量中但是要获得两个 (p) 元素的坐标 Y,我必须循环进入 for 循环并指定 [i] 变量,该变量将像这样放置两个值永远循环迭代:
for (let i = 0; i < paragraphsToFade.length; i++) {
var paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
}
之后,我创建了一个名为 screenSize 的变量,它可以访问 window 高度:
var screenSize=window.innerHeight;
然后我用 if/else 语句检查一个条件,检查元素的顶部值是否小于 window 的高度,如果为真,则添加 class fadeInAnimation,这将重置不透明度为 1 和 transform: translateY 为 0,过渡为 1s,正如我在解释开始时指定的那样。
var screenSize=window.innerHeight;
if(paragraphsPosition < screenSize){
paragraphsToFade.classList.add("fadeInAnimation");
}
最后我只是调用函数滚动出现,当用户滚动 window :
window.addEventListener("scroll",scrollAppear);
我不知道为什么,但是当我使用 querySelector 并且我只有一个段落时淡入淡出效果有效,但是当我使用 querySelectorAll 并且我想抓取多个段落时,它不起作用,也许我不要循环太棒或其他东西,我在不同的地方使用 console.log 试图知道发生了什么,但我不明白为什么?
我在教程中看到了这种淡入淡出效果: https://www.youtube.com/watch?v=C_JKlr4WKKs
看到这个 fiddle,您正在将 class 附加到一个包含多个元素的对象,而不是每个元素本身。
当您遍历数组时,将 class 包含在 for 循环中的元素中
function scrollAppear(){
var paragraphsToFade = document.querySelectorAll(".paragraphs_to_fade");
var paragraphsPosition;
for (let i = 0; i < paragraphsToFade.length; i++) {
paragraphsPosition=paragraphsToFade[i].getBoundingClientRect().top;
var screenSize=window.innerHeight;
if(paragraphsPosition < screenSize && !paragraphsToFade[i].classList.contains("fadeInAnimation") ){
paragraphsToFade[i].classList.add("fadeInAnimation");
console.log('added class');
}
}
}
window.addEventListener("scroll",scrollAppear);