菜单打开/关闭的过渡

Question

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

我尝试在菜单打开/关闭时添加 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;
}