tro*_*mgy 5
问题是display
属性(通过hidden
类)不能被动画化,你可以在这里看到动画属性的完整列表。
您可以设置动画height
,但它需要明确指定完整的菜单高度(auto
不会设置动画),因此h-32
在下面的代码中只是一个示例,您可能需要根据您的具体情况进行更改。
这是一个例子:
<div
className={`${
active ? 'h-32' : 'h-0'
} transition-all delay-150 duration-300 overflow-hidden w-full`}
>
...
注意transition-all
使用了,simpletransition
不会动画height
,ease-in-out
去掉了,因为是多余的,同样的计时功能已经包含在transition-all
.
更多推荐
平滑,菜单
发布评论