有没有办法使用 Tailwind CSS 过渡边框答案

【问题标题】：Is there a way to transition a border in with Tailwind CSS有没有办法使用 Tailwind CSS 过渡边框
【发布时间】：2022-09-24 23:04:45
【问题描述】：

您好，我正在尝试使边框在到达 y 点后顺利过渡到页面，但是如果有人可以提供帮助，我将在过渡动画方面遇到问题，我们将不胜感激。我使用反应和顺风。

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

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>
  );
};

标签： css reactjs css-transitions tailwind-css

【解决方案1】：

使用transition-all 而不是transition。

【讨论】：