如何在react原生滚动的基础上动画标题显示？

import React, { useState } from 'react';

function App() {
  const [showTitle, setShowTitle] = useState(false);

  return (
    <div>
      {showTitle && <h1 className="animated-title">动画标题</h1>}
      <div className="content" onScroll={() => setShowTitle(true)}>
        {/* 内容 */}
      </div>
    </div>
  );
}

export default App;

.animated-title {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s, transform 0.5s;
}

.animated-title.show {
  opacity: 1;
  transform: translateY(0);
}

import React, { useState, useEffect } from 'react';

function App() {
  const [showTitle, setShowTitle] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollY = window.scrollY;
      const content = document.querySelector('.content');
      const contentTop = content.offsetTop;
      const contentBottom = contentTop + content.offsetHeight;

      if (scrollY >= contentTop && scrollY <= contentBottom) {
        setShowTitle(true);
      } else {
        setShowTitle(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      {showTitle && <h1 className="animated-title">动画标题</h1>}
      <div className="content">
        {/* 内容 */}
      </div>
    </div>
  );
}

export default App;