如何为下拉选择框的展开与收起状态均添加旋转过渡效果？

问题出在你只在open为true时才添加transition-all类——当open切换为false时，这个过渡属性类会被一起移除，元素直接失去过渡能力，所以箭头会瞬间复位，没有动画。

解决方法很简单：把过渡类固定保留，只切换旋转类即可：

<img src="./downArrow.png" className={`transition-all ${open ? "rotate-180" : ""}`} />

这样不管容器是打开还是关闭状态，transition-all始终存在于元素的类名中。当open状态切换时，只是添加/移除rotate-180类，过渡属性会生效，箭头的旋转动画就能双向平滑执行了。

内容的提问来源于stack exchange，提问作者Lucca