对一个有css3动画容器hide().show()，动画不触发，但给show加一个定时器后，动画触发，为什么？

Question

有一个DIV容器，我加了css3动画的class，按理说如果我对这个容器进行hide之后show操作（比如toggle它），容器显示后能触发动画。

但事实是：

content.hide().show()
//或者
content.hide();
content.show();

动画都没有触发。而：

content.hide();
timeOut = setTimeout(function(){
    imgContent.show();
},0)

却可以触发动画，这是为什么？

一个在线demo：
https://jsfiddle.net/fenglinzeng/rp6zhfp5/2/

Answer 1

btn.on('click', function() {
  imgContent.hide(400, function(){imgContent.show(400)});
});

参考
http://api.jquery.com/hide/
和
http://api.jquery.com/show/

简单说要hide完了才能show吧…？

Answer 2

基于我的经验给出的答案是，hide的结果是为元素添加了display:none这个样式，toggle（show）的时候换成了block，display在css3是没有对应动画的，所以执行动画的时候遇到了display:none动画就无效了。

settimeOut其实是先去掉了display:none,这个样式，再执行动画的时候就可以了；

你可以通过先删除元素的这个样式，然后再添加动画的class来验证。