[英]Delay translate elements with Intersection Observer API
我正在使用Intersection Observer API在用户滚动到内容时显示元素。 它运作良好,但我想延迟显示div ,如果有4个div's
,我希望第一个显示,接下来0.5秒显示下一个...不是全部在同一时间。 在示例中,效果也仅适用于第一class
,如果有多于1个class
,则它不适用于下一个img classes
,只适用于第一个img classes
。 您可以在本页底部看到该示例。
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
数组来跟踪被动画化的元素。
如果您只想为元素设置动画一次,则在开始相交后,您可以在观察者上调用unobserve
以从其他交叉事件中取消注册。
注意:我编辑了您的HTML / CSS,使网格在片段中工作,以演示多个元素在同一行上时的连续动画效果。 我还在内部div中添加了一个with-img
类,因此我们可以查询它们并将它们传递给observe方法。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.