11

我有几个类:hideisdisplay: nonetransparentis opacity: 0。该元素pr_container具有-webkit-transition: opacity 1s. 以下基于 JQuery 的代码使元素以动画方式出现:

pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);

但是,当我删除setTimeout而只是删除第二类时,没有动画。为什么?

编辑:我使用的是最新的 Chrome,我还没有检查其他浏览器。

编辑:我尝试将两个调用放在同一个setTimeout回调中 - 没有动画。所以这显然是关于分离的。

编辑:这里是 jsFiddle:http: //jsfiddle.net/WfAVj/

4

4 回答 4

3

如果您同时更改display属性,则无法进行转换。因此,为了使其工作,您必须以其他方式隐藏您的元素。例如:

.hide {
    height: 0;
    width: 0;
    /* overflow: hidden; padding: 0; border: none; */
}

http://jsfiddle.net/dfsq/WfAVj/1/

于 2013-02-14T11:07:26.677 回答
3

从一种状态到另一种状态的转换没有合理的“曲线display” ,因此在当前的浏览器实现中,任何以某种方式涉及的转换display最终都将完全没有转换。

使用此代码:

pr_container.removeClass("hide");
pr_container.removeClass("transparent");

您可以想象这两个语句在单个“阻塞”队列中执行,因此浏览器实际上将元素从class="hide transparent"to渲染class="",并且如上所述,hide该类实际上使任何现有转换无效。

通过使用

pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);

您告诉浏览器“尽快,但不在同一个队列中”删除“透明”类,因此浏览器首先删除“隐藏”,然后继续。当浏览器认为它有可用资源时,会删除“透明”,因此转换不会失效。

于 2013-02-14T11:19:34.847 回答
0

只有“透明”类产生动画..“隐藏”是即时的。所以开始动画,如果需要,1秒后“隐藏”:

 test.addClass("transparent");
 //hide after 1 sec, when the animation is done
 setTimeout(function() {test.addClass("hide"); }, 1000);  //1000ms = 1sec

http://jsfiddle.net/WfAVj/4/

于 2013-02-14T11:19:23.713 回答
0

通过使用链接问题中的建议,我制作了一个我满意的版本:

.test {
    -webkit-transition: visibility 1s, opacity 1s;
}

.hide {
    visibility: hidden;
}

.transparent {
    opacity: 0;
}

http://jsfiddle.net/xKgjS/

编辑:现在这两个类甚至可以合并为一个!

谢谢大家!

于 2013-02-14T11:24:15.763 回答