Question

我一直在尝试使用gatsby-plugin-scroll-reveal，它使用Sal.js为我网站上的英雄部分制作动画。我正在尝试制作该样式，以便在向下滚动页面时，英雄中的文本逐渐淡入，然后逐渐淡出。现在，我只能淡入淡出。如何使用Sal.js或其他方式实现它？

我还尝试通过创建使用IntersectionObserver DOM API的组件来尝试另一种方式，但我无法使它真正起作用。

以下是组件：

import React from 'react';
import ReactDOM from 'react-dom';

function FadeInSection(props) {
  const [isVisible, setVisible] = React.useState(true);
  const domRef = React.useRef();
  React.useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => setVisible(entry.isIntersecting));
    });
    observer.observe(domRef.current);
    return () => observer.unobserve(domRef.current);
  }, []);
  return (
    <div
      className={`fade-in-section ${isVisible ? 'is-visible' : ''}`}
      ref={domRef}
    >
      {props.children}
    </div>
  );
}

export default FadeInSection

Answer 1

我从本文中找到了解决方案： https://markoskon.com/scroll-reveal-animations-with-react-spring/

因此，我正在使用react-spring在滚动屏幕上创建显示动画，并使用react-visibility-sensor来查看我想要的动画元素是否可见。

// App.js

import React from "react";
import { Spring } from "react-spring/renderprops";
import VisibilitySensor from "react-visibility-sensor";

<VisibilitySensor once>
   {({ isVisible }) => (
     <Spring delay={100} to={{ opacity: isVisible ? 1 : 0 }}>
       {({ opacity }) => <h1 style={{opacity}}>Title</h1>}
     </Spring>
    )}
</VisibilitySensor>

盖茨比/反应-滚动上的淡出部分？

1 个答案: