Question

我知道滚动触发和通过jquery向HTML元素添加类名很容易，但是我想知道是否有可能（甚至值得）尝试在react或vanilla { {1}}。我正在学习反应，并希望在用户滚动网页一定距离时触发动画。到目前为止，我还没有使用过javascript，因为许多人建议您应该尽可能使用香草jquery，因为它非常强大，并且您不需要导入javascript库。

我已经用下面的代码在香草JS中成功实现了滚动触发器，尽管它效率很低，因为它在滚动上使用了事件侦听器（也许jquery仍然这样做吗？）。 jQuery仅仅是做我想要的最好的方法吗？预先感谢您，这是意大利面条代码：

Jquery

Answer 1

通常不赞成将jQuery与ReactJS一起使用，主要是因为js不需要其他任何东西来接触DOM。由于Reactjs使用虚拟DOM，而jQuery触摸DOM本身，因此您会发现一些奇怪的事情开始发生。

Answer 2

这是一个古老的问题，但唯一存在的答案是完全不相关的，现在有一个很好的方法 - IntersectionObserver API.

const callback = (entries) => 
  entries.forEach(entry => 
    entry.isIntersecting && entry.target.classList.add("show")
  );

const observer = new IntersectionObserver(callback);
const animate = document.querySelectorAll(".animate");
animate.forEach(div => observer.observe(div));

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body > * + * { margin-top: 1em }
#content {
  height: 100vh;
  background: red;
}
.animate {
  height: 20vh;
  background: blue;
  opacity: 0;
  transition: opacity 1s;
}
.animate.show {opacity: 1}

<div id="content">content</div>
<div class="animate">animate me 1</div>
<div class="animate">animate me 2</div>
<div class="animate">animate me 3</div>

最好的部分是，对于您的 React 需求，您甚至可以使用一个库！ react-intersection-observer

$ npm install react-intersection-observer --save
$ # or
$ yarn add react-intersection-observer

（来自自述文件）

import React from 'react';
import { useInView } from 'react-intersection-observer';

const Component = () => {
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );
};

在Vanilla JS中滚动动画

2 个答案: