Question

我正在使用rendro（https://rendro.github.io/easy-pie-chart/）的简单饼图插件。基本上，我只希望动画在滚动到显示图表的页面上的特定区域时才发生。我该如何实现？

Answer 1

Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档的视口相交的变化的方法。

专家：

无需添加滚动侦听器，反跳功能。
代码更加清晰明了。

缺点：

Safari缺乏支持，因此您需要添加polyfill。

function handler(entries, observer) {
  for (entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add('inView');
    }
  }
}
let observer = new IntersectionObserver(handler);
observer.observe(document.querySelector(".takeAction"));

.takeAction {
  background-color: #fff;
  transition: 3s background-color;
}

.takeAction.inView {
  background-color: yellow;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p class="takeAction">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>

http://jsfiddle.net/30unpcLm/2/

当页面滚动到该部分时触发js动画

1 个答案: