页面加载时的CSS动画

Question

I am using AJAX to load pages on my site. 我正在使用AJAX在我的网站上加载页面。

Whilst a page is loading - I want the logo to spin in order to signify that it's loading. 当页面正在加载时-我希望徽标旋转以表示它正在加载。

The jQuery (Not sure if it's actually javascript, I'm new to java/jquery) being used to control the css when the page is loading is 当页面加载时，用于控制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');
        }
    }

The CSS controlling the animation is 控制动画的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 */
    }

Is there a property that I can add to the CSS (via jquery) so that the logo doesn't spin when the page isn't loading... At the moment the logo spins constantly 是否有可以添加到CSS（通过jquery）的属性，以便在页面未加载时徽标不会旋转...此刻徽标不断旋转

Maybe there is a property that I can take away from the "#logo" selector, which will invalidate the spin 也许有一个我可以从“ #logo”选择器中删除的属性，它将使旋转无效

and then I can add a certain property whilst the page is loading (through javascript) to make the spin work? 然后我可以在页面加载时（通过javascript）添加特定属性以使旋转工作？

thanks 谢谢

Answer 1

Instead of binding the CSS animation to #logo , bind it to a class - eg .spin . 不要将CSS动画绑定到#logo ，而#logo绑定到一个类-例如.spin 。 When Ajax is starting, add the spin class to #logo , using addClass : 启动Ajax时，使用addClass将spin类添加到#logo ：

$("#logo").addClass("spin");

When ajax content finished loading, use removeClass : 当ajax内容完成加载时，请使用removeClass ：

$("#logo").removeClass("spin");

This way you can easily show the logo normally, and make it spin only when ajax is acitve. 这样，您可以轻松地正常显示徽标，并且仅当ajax有效时才使其旋转。

Answer 2

Use something like <body class="loading"> in your page. 在页面中使用<body class="loading"> 。

Then on the bottom of the page, have $('body').removeClass('loading'); 然后在页面底部，有$('body').removeClass('loading');

Then target your css animation with body.loading #logo selector. 然后使用body.loading #logo选择器定位您的CSS动画。

Once the page is fully loaded, the jquery will remove the .loading class and the animation stops. 页面完全加载后，jQuery将删除.loading类，动画将停止。

Also in your $.ajax you should add the .loading class at beforeSend and remove the class on complete event. 另外，在你的$.ajax应该添加.loading在类beforeSend ，卸下类complete的事件。

Answer 3

It looks like your hiding the logo initially, and showing after the content loads(as mentioned in the comments). 看起来像是您最初隐藏徽标，然后在内容加载后显示（如评论中所述）。 Also, you are using the display property to hide it, and the visibility property to hide it. 另外，您正在使用display属性来隐藏它，而使用visibility属性来隐藏它。 Those are not the same. 那些不一样。 I switched your functions below, and use the display property for both. 我在下面切换了您的功能，并使用了display属性。 Not sure if there are other errors, but give this a try, it should get you in the right direction. 不确定是否还有其他错误，但是请尝试一下，它应该使您朝着正确的方向前进。

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动画

问题描述

3 个解决方案

解决方案1
1 2013-01-27 20:00:18

解决方案2
0 2013-01-27 20:01:13

解决方案3
0 2013-01-27 20:18:28

页面加载时的CSS动画

问题描述

3 个解决方案

解决方案1 1 2013-01-27 20:00:18

解决方案2 0 2013-01-27 20:01:13

解决方案3 0 2013-01-27 20:18:28

解决方案1
1 2013-01-27 20:00:18

解决方案2
0 2013-01-27 20:01:13

解决方案3
0 2013-01-27 20:18:28