8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

交叉口观察者计数所有元素并添加延迟

John Gerken 2月前

45 0

我想使用 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 .

谢谢。

帖子版权声明 1、本帖标题:交叉口观察者计数所有元素并添加延迟
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由John Gerken在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 我假设您想在至少一半的元素可见时更改背景颜色并添加过渡,然后当少于一半的元素可见时更改回默认的背景颜色?

  • 您需要 在元素节点列表的循环中 观察者 对象 回调方法 选项 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>
返回
作者最近主题: