有一个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/
btn.on('click', function() {
imgContent.hide(400, function(){imgContent.show(400)});
});
参考
http://api.jquery.com/hide/
和
http://api.jquery.com/show/
简单说要hide完了才能show吧…?
基于我的经验给出的答案是,hide的结果是为元素添加了display:none这个样式,toggle(show)的时候换成了block,display在css3是没有对应动画的,所以执行动画的时候遇到了display:none动画就无效了。
settimeOut其实是先去掉了display:none,这个样式,再执行动画的时候就可以了;
你可以通过先删除元素的这个样式,然后再添加动画的class来验证。