頁面加載時的CSS動畫
[英]CSS Animation when page is loading
問題描述
我正在使用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 個解決方案
解決方案1
1 2013-01-27 20:00:18
不要將CSS動畫綁定到#logo ，而#logo綁定到一個類-例如.spin 。 啟動Ajax時，使用addClass將spin類添加到#logo ：
$("#logo").addClass("spin");
當ajax內容完成加載時，請使用removeClass ：
$("#logo").removeClass("spin");
這樣，您可以輕松地正常顯示徽標，並且僅當ajax有效時才使其旋轉。
解決方案2
0 2013-01-27 20:01:13
在頁面中使用<body class="loading"> 。
然后在頁面底部，有$('body').removeClass('loading');
然后使用body.loading #logo選擇器定位您的CSS動畫。
頁面完全加載后，jQuery將刪除.loading類，動畫將停止。
另外，在你的$.ajax應該添加.loading在類beforeSend ，卸下類complete的事件。
解決方案3
0 2013-01-27 20: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');
}
}
刷新頁面時未加載CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.