如何使用 React Hooks/React Spring 在滾動時淡入元素

Question

我正在嘗試創建一個 animation ，其中一個元素根據另一個元素的滾動 position 逐漸消失。 我能夠使用 React Spring 讓滾動元素工作，但我正在努力思考如何利用 state 鈎子而不使用條件並且只能在組件級別設置 Z9ED39E2EA931586B73A985A6942EF。

沙盒

const HomeView = () => {
  const ref = useRef();
  const [isVisible, setVisible] = useState(true);
  const [{ offset }, set] = useSpring(() => ({ offset: 0 }));

  const calc = (o) => {
    if (o < 1004) {
      return `translateY(${o * 0.08}vh)`;
    } else {
      // this won't work b/c im trying to useState in a Fn
      setVisible(false);
      return `translateY(${1012 * 0.08}vh)`;
    }
  };

  const handleScroll = () => {
    const posY = ref.current.getBoundingClientRect().top;

    const offset = window.pageYOffset - posY;
    set({ offset });
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  });

  return (
    <div ref={ref} className="home-view" style={homeViewStyles}>
      <div style={topSectionStyles} className="top-content-container"></div>
      <animated.div
        className="well-anim"
        style={{
          width: "100vw",
          height: "500px",
          transform: offset.interpolate(calc),
          zIndex: 300,
          top: "340px",
          position: "absolute"
        }}
      >
        <h1>Well,</h1>
      </animated.div>
      {/* Trying to fade this component when above animated.div is right above it */}
      <h2 style={{ paddingTop: "90px" }} fade={isVisible}>
        Hello There!
      </h2>
      {/***************************************/}
    </div>
  );
};

Answer 1

你快到了。 我認為這里的問題在於淡入淡出屬性。 setVisible function 調用正常。 我將介紹第二個 spring 來處理 h2 元素的不透明度，基於 isVisible 變量的 state。

const {opacity} = useSpring({opacity: isVisible ? 1 : 0});

  <animated.h2 style={{ paddingTop: "90px", opacity }} >
    Hello There!
  </animated.h2>

https://codesandbox.io/s/wild-dew-tyynk?file=/src/App.js