gpt4 book ai didi

javascript - 使用 Intersection Observer API 延迟翻译元素

转载 作者:搜寻专家 更新时间:2023-10-31 08:39:09 25 4
gpt4 key购买 nike

我正在使用 Intersection Observer API当用户滚动到内容时显示元素。它运行良好,但我想延迟要显示的 div,如果有 4 个 div ,我希望显示第一个,接下来 0.5 秒显示下一个……不是同时发生的。在示例中,效果也仅适用于第一个 class,如果有多个 class,则不适用于下一个 img classes,只有第一个。您可以在 page 的底部看到示例.

HTML

<section id="staff" style="padding-top: 100px;">
<div class="col-lg-12 mx-auto mb-5">
<div class="container">
<div class="row icons-info">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<img class="floating show-bottom" src="img/Muñeco 1-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
<img class="floating" src="img/Muñeco 2-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
<img class="floating" src="img/Muñeco 3-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<img class="floating" src="img/Muñeco 1-08.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
</div>
</div>
</div>
</div>
</section>

JS

// Instantiate a new Intersection Observer
let observer7 = new IntersectionObserver(onEntry7);
let staff = document.querySelector('.floating');

let element7 = document.querySelector("#staff p");
observer7.observe(element7);

function onEntry7(entry7) {
if (entry7[0].isIntersecting) {
staff.classList.add("show-bottom");
}
}

CSS

.floating {opacity: 0; transition: 1s opacity;}
.floating.show-bottom {opacity: 1;
animation: movefromtop 1s alternate infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;}
@keyframes movefromtop {
from {
transform: translateY(-5em);
}
to {
transform: translateY(0em);
}
}

最佳答案

使用querySelectorAll()获取所有内部 div 元素,然后使用 forEach 为所有元素调用 observer.observe() 方法。然后在观察者中,使用target 属性查询内部图像并为其添加show-bottom 类。

要在每个动画之间添加延迟,您必须通过返回 Promise 并使用 setTimeout() 创建动画链。如果同一元素的交集触发多次,请确保不要在动画中多次链接同一元素。为此,使用 animatedElements 数组来跟踪动画元素。

如果您只想为元素设置一次动画,在 begin intersected 之后,您可以在观察者上调用 unobserve 以取消注册更多的交叉事件。

注意:我编辑了您的 HTML/CSS 以使网格在代码段中起作用,以演示当多个元素位于同一行时的顺序动画效果。我还向内部 div 添加了一个 with-img 类,这样我们就可以查询它们并将它们传递给观察方法。

const onEntry7 = animateSequence('.floating', 'show-bottom');
const observer7 = new IntersectionObserver(onEntry7);
const allElements7 = document.querySelectorAll('#staff div.with-img');
allElements7.forEach(e => observer7.observe(e));

function animateSequence(targetSelector, classToAdd, delay = 500) {
const animatedElements = [];
let chain = Promise.resolve();

function show(e) {
return new Promise((res, rej) => {
setTimeout(() => {
e.classList.add(classToAdd);
res();
}, delay);
});
}
return function(entries) {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
const elem = entry.target.querySelector(targetSelector);
if (!animatedElements.includes(elem)) {
animatedElements.push(elem);
console.clear();
console.log('chaining', ...animatedElements.map(e => e.getAttribute('data--name')));
chain = chain.then(() => show(elem));
observer7.unobserve(entry.target);
}
}
})
}
}
.floating {
opacity: 0;
transition: 1s opacity;
width: 157px;
height: 220px;
}
.floating.show-bottom {
opacity: 1;
animation: movefromtop 1s alternate infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes movefromtop {
from { transform: translateY(-5em); }
to { transform: translateY(0em); }
}
section#staff {
margin-top: 200px;
margin-bottom: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
Scroll Down
<section id="staff" style="padding-top: 100px;">
<div class="col-lg-12 mx-auto mb-5">
<div class="container">
<div class="row icons-info">
<div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
<img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png" data--name="1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
</div>
<div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
<img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 2-08.png" data--name="2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
</div>
<div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
<img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 3-08.png" data--name="3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
</div>
<div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
<img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png" data--name="4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
</div>
</div>
</div>
</div>
</section>

关于javascript - 使用 Intersection Observer API 延迟翻译元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55206507/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com