菜单转换 open/close

Question

我创建了 this very simple layout，其中有一个按钮，用户可以单击该按钮来打开和关闭菜单。

我尝试在菜单 opening/closing 时添加 CSS 转换，但它似乎不起作用。

这是应该使用转换的 div：

<div className={`${isMenuOpen ? "w4" : "w-0"} bg-yellow transition`} />

.transition {
  transition: all 1.5s ease;
}

为什么？

Answer 1

问题是 .w-0 没有定义的 width。转换 属性 需要一个初始值才能从 .

转换

只需将此添加到您的 CSS 文件中：

.w-0 {
  width: 0;
}