有没有办法使用 Tailwind CSS 过渡边界

Question

您好，我正在努力做到这一点，以便一旦我到达任何点，边框就会顺利过渡到页面，但是如果有人能提供帮助，我在过渡 animation 时遇到问题，将不胜感激。 我使用反应和顺风。

这是我到目前为止的代码。

const Navbar = () => {
  const [navStyles, setNavStyles] = useState(false);

  useEffect(() => {
    const handleNavStyles = () => {
      if (window.scrollY > 80) {
        setNavStyles(true);
      } else {
        setNavStyles(false);
      }
    };
    window.addEventListener('scroll', handleNavStyles);
  }, []);

  
  return (
    <header className="sticky top-0 z-10 backdrop-blur-md ">
      <nav
        className={`mx-auto flex max-w-screen-sm items-center space-x-3 py-3 px-4 sm:py-5 sm:px-0 ${
          navStyles ? 'border-b transition duration-300 ease-in' : ''
        }`}
      >
      <div>Navbar</div>
      </nav>
    </header>
  );
};

Answer 1

使用transition-all 而不是transition。