ReactJS 点击按钮展示 Dropdown 并添加 CSS 过渡效果

要实现 CSS 过渡效果，你可以在 CSS 文件中为 'dropdown-content' 类添加过渡属性。例如，你可以为高度、透明度或位置添加过渡效果。

在你的 CSS 文件中添加以下代码：

.dropdown-content {
  transition: all 0.5s ease;
}

这将为 'dropdown-content' 类添加一个 0.5 秒的过渡效果，并使用 ease 函数使过渡更加平滑。

确保将 CSS 文件链接到你的 React 组件中。这样，当你点击按钮时， 'dropdown-content' 的显示和隐藏将具有过渡效果。

以下是完整的 React 组件代码：

import React, { useState } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && <div className='dropdown-content'>Dropdown Content</div>}
    </div>
  );
}

export default Dropdown;