css - jQuery UI addClass 方法没有动画可见性？

Question

jQuery UI 的一个有用特性是它劫持了 jQuery addClass 方法，通过包含第二个“持续时间”参数来添加动画支持，如下所示:

$('div').addClass('someclass', 1000);

对于传入的 CSS 属性，如 color、background-color、width、height 等，这一切都有效很好。

但是转换像 visibility:hidden -> visibility:visible 和 display:none -> display:block 不要像我期望的那样优雅地淡入。它们只是等到持续时间结束，然后在最终添加类(class)时出现。

我敢肯定，在过去，我在 jQuery UI 中看到过这些 CSS 类型的优雅过渡。有没有其他人知道这是否可行？

我知道 fadeIn 和 fadeOut 方法，以及 animate 方法，但我希望给予更多优先权到我的样式表，而不必用样式动画逻辑重载我的脚本。

我知道 CSS3 转换也能做到这一点，但我正在寻找一种支持更好的方法。

Answer 1

display 和 visibility 没有可转换状态 - 它们要么打开(您可以看到一个元素)，要么关闭(您看不到该元素)。

如果你想让它淡入，那么你必须使用不透明度。