为什么在动画出现之前屏幕会变白？

Question

我制作了一个新的Google Chrome扩展程序，可以使用JQuery和CSS3执行Google的“Barrel Roll”和其他很酷的效果。但是，在动画发生之前，屏幕始终闪烁（变为白色）不到一秒钟。这是为什么？

可以在此处下载扩展程序：https://chrome.google.com/webstore/detail/lhokhgkogpghngcflpackepikbjejhkf

function effect_barrel_roll() { $('body').addClass('barrel_roll');
setTimeout("$('body').removeClass('barrel_roll')", 4000); }

body.barrel_roll { 
    -webkit-transition: -webkit-transform 4s ease; 
    -webkit-transform: rotate(360deg); 
}

Answer 1

在显示新内容之前，您可能需要淡出以前的内容。当我使用Ajax和JavaScript更改页面内容时，我遇到了创建website的相同问题。

在我收到内容之前，我添加了以下代码：

xmlhttp.open("GET", "parts/" + part + ".html", true);

$("#" + id).fadeOut(500);

xmlhttp.send();

在显示新内容之前淡出先前的内容。