我想使用 Intersection Observer 在我的网格布局的每个项目上触发动画，并在观察它们时使用交错效果。当我使用 count 来合并时，我的代码似乎不起作用......
我想使用 Intersection Observer 在我的网格布局的每个项目上触发动画，并在观察它们时使用交错效果。
计算网格中的所有元素然后设置延迟的属性 count 时，我的代码似乎不起作用
HTML：
<div class="grid">
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
</div>
CSS：
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
width: 100%;
}
.grid-item {
width: 100%;
height: 30em;
background-color: #ccc;
transition: background-color .6s ease;
}
.grid-item.is-in-view {
background-color: red;
}
JS：
const options = {
threshold: 0.5
}
const inViewCallback = entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-in-view');
}
});
}
let observer = new IntersectionObserver(inViewCallback,options);
window.addEventListener('DOMContentLoaded', (event) => {
let elements = Array.from(document.getElementsByClassName('js-item'));
for (let element of elements) {
for (let count = 0; count < element.length; count++) {
element[count].setAttribute('style', 'transition-delay: ' + count * 0.5 + 's');
observer.observe(element)
}
}
});
你可以查看 codepen .
谢谢。
我假设您想在至少一半的元素可见时更改背景颜色并添加过渡，然后当少于一半的元素可见时更改回默认的背景颜色？
您需要 在元素节点列表的循环中 观察者 对象 回调方法 内 选项 IntersectionObserver 的末尾 传递 IntersectionObserver 。然后调用观察者并传入正在循环的元素。
在回调方法中传递 条目 和 元素 ，检查 条目 相交 ，如果是，则更改背景颜色样式，从那里您的 css 转换将处理动画，添加 else 来处理返回灰色的转换。
如果这不是你想要的，请告诉我。
在代码片段中添加了进一步的注释。
//callback method, takes the observers entry and the nodelist item as a param
const inViewCallback = (entries, item) => {
// forEach entry
entries.forEach(entry => {
// check if it is intersecting
entry.isIntersecting ?
// if it is, chang ethe backgroundColor to red
// the css transition set on the element will handle the animation
item.style.backgroundColor = 'red' :
// set the backgroundColor back to default
item.style.backgroundColor = '#ccc';
});
};
// event for DOM load
window.addEventListener('DOMContentLoaded', (event) => {
// get the element node list
const items = document.querySelectorAll('.js-item');
// set your options for the Intersection object
const options = {
threshold: 0.5
};
// iterate over the elements node list
items.forEach((item) => {
// define the Observer and define the entry
// inside the forEach loop to get each single node to be affected
const Observer = new IntersectionObserver((entries) => {
// pass the entries and item node into the observer callback
inViewCallback(entries, item);
}, options); // pass in the options
// call the Observer and pass in the item node as a parameter
Observer.observe(item);
});
});.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
width: 100%;
}
.grid-item {
width: 100%;
height: 10em;
background-color: #ccc;
transition: background-color .6s ease;
}<div class="grid">
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
<div class="grid-item js-item"></div>
</div>