如何使用CSS过渡效果来制作下拉菜单动画？

Question

我知道当在类之间更改显示模式时，过渡效果无法发挥作用。

所以我想使用jQuery来更改类。我在这里制作了一个fiddle: http://jsfiddle.net/v8GTz/ 但似乎不能正常工作 :(

看起来边框正在被动画化，但高度不是。而且opacity只会动画一次。

我在这里做错了什么？

---

好的，我成功实现了淡入淡出效果，但高度仍未动画化：

http://jsfiddle.net/XYD9K/

- Alex

Answer 1

具体来说，当你停止悬停在“ul ul”上时，你没有删除“expanded”类。实际上，你再次添加它，我想这是一个无意的错误！

- niaccurshi

---

我已经为您添加了一个更新的jsfiddle，http://jsfiddle.net/XYD9K/1/，它展示了如何在不需要担心Javascript的情况下获得所需的效果。请注意，元素始终显示为display:block，但我们改变max-height和opacity来获得所需的效果。这并不完美，您可能希望添加一些javascript来确定下拉菜单的高度，并更改ul的“max-height”值以匹配它。这将提供最清晰的上下滑动效果。 - niaccurshi