下拉菜单（Dropdown）是Web应用程序中非常常用的组件之一，可以用于显示一组选项，供用户选择或执行特定操作。在React和Vue中，我们可以通过创建一个自定义组件来实现一个优雅而炫酷的下拉菜单。
实现思路
我们将利用以下几个技术和概念：
- CSS动画
- 状态管理
- 事件处理
HTML结构
我们使用基本的HTML结构来创建一个下拉菜单：
-- -------------------- ---- -------
---- -----------------
------- ----------------------------------------
---- -----------------------
----
---------- ------
---------- ------
---------- ------
-----
------
------这里有一个按钮(button)，当单击它时，会显示一个包含选项的下拉列表(ul)。我们还为下拉菜单添加了两个CSS类(dropdown和dropdown__toggle)，以便稍后在样式表中使用。
样式
我们将使用CSS动画来为下拉菜单添加动态效果。首先，我们需要定义包含下拉列表(ul)的容器元素(.dropdown__menu)的初始状态。我们可以将其设置为不可见，并向上移动超过其高度：
.dropdown__menu {
position: absolute;
top: -9999px;
left: 0;
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: translateY(-10px);
}接下来，我们需要为下拉列表的容器元素(.dropdown__menu)定义一个活动状态，并将其向下移动以显示下拉列表：
.dropdown--active .dropdown__menu {
top: 100%;
left: 0;
opacity: 1;
transform: translateY(0);
}当包含下拉列表的容器元素处于活动状态时，我们还需要定义透明度和平移变换的过渡。
最后，我们使用以下样式来定义按钮(button)的样式和动画效果：
-- -------------------- ---- ------- ----------------- - --------- --------- -------- -- ----------- --------- ---- ------------ - ----------------- ----------------- - ---------- --------------- -
这些样式代码将使按钮在被单击时旋转180度，以指示下拉列表是否处于活动状态。
交互逻辑
现在，我们已经为下拉菜单定义了样式和动画效果，下一步是为其添加交互逻辑。可以通过以下方式实现：
- 点击按钮时，将下拉菜单设为活动状态（
dropdown--active）。 - 点击下拉列表中的选项时，将其值设置为选择的选项。
- 在窗口中点击任何其他地方时，将下拉菜单设为非活动状态（
dropdown--inactive）。
React
在React中，我们可以使用useState钩子来管理下拉菜单的活动状态：
-- -------------------- ---- -------
------ - -------- - ---- --------
-------- ---------- -
----- ---------- ------------ - ----------------
-------- -------------- -
-----------------------
-
------ -
---- -------------------- ---------- - ------------------ - ------
------- ---------------------------- -----------------------
------
---------
---- ---------------------------
----
---------- ------
---------- ------
---------- ------
-----
------
------
--
-在上面的代码中，我们使用了useState钩子并将其初始状态设置为false。在按钮被单击时，我们会
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5402