加载页面时的CSS动画
我使用AJAX在我的网站上加载页面。
当一个页面正在加载时-我希望徽标旋转，以表明它正在加载。
加载页面时用来控制css的jQuery (不确定它是否真的是javascript，我对java/jquery很陌生)是
function loadPage(url)
{
url=url.replace('#page','');
$('#logo').css('display','none;');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#logo').css('visibility','visible');
}
}控制动画的CSS是
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#logoholder {
}
#logo {
background: url(images/logo.png) 0 0 no-repeat;
width: 130px;
height: 130px;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms; /* 40 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms; /* 40 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms; /* 40 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* boooo opera */
-o-transition: rotate(3600deg); /* works */
}有没有一个属性，我可以添加到CSS (通过jquery)，使徽标不旋转时，页面不加载…在那一刻，徽标不断旋转
也许我可以从"#logo“选择器中获取一个属性，它将使旋转无效
然后我可以在页面加载时添加某个属性(通过javascript)以使旋转工作？
谢谢
回答 3
Stack Overflow用户
发布于 2013-01-28 04:00:18
不是将CSS动画绑定到#logo，而是将其绑定到一个类--例如.spin。启动Ajax时，使用addClass将spin类添加到#logo
$("#logo").addClass("spin");当ajax内容加载完成后，使用removeClass
$("#logo").removeClass("spin");这样你就可以很容易地正常显示徽标，并使它只在ajax激活时旋转。
Stack Overflow用户
发布于 2013-01-28 04:01:13
在你的页面中使用像<body class="loading">这样的东西。
然后在页面的底部设置$('body').removeClass('loading');
然后用body.loading #logo选择器定位你的css动画。
页面完全加载后，jquery将删除.loading类，动画将停止。
另外，在您的$.ajax中，您应该在beforeSend添加.loading类，并在complete事件上删除该类。
Stack Overflow用户
发布于 2013-01-28 04:18:28
它看起来像你最初隐藏的徽标，并在内容加载后显示(如评论中所述)。另外，您将使用display属性和visibility属性来隐藏它。这些是不一样的。我在下面切换了您的函数，并将display属性用于这两个函数。不确定是否有其他错误，但试一试，它应该会把你带到正确的方向。
function loadPage(url)
{
url=url.replace('#page','');
$('#logo').css('display','block');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#logo').css('display', 'none');
}
}https://stackoverflow.com/questions/14551521
复制相似问题
腾讯云开发者
