问加载页面时的CSS动画
EN

Stack Overflow用户

提问于 2013-01-27 19:53:29

回答 3查看 580关注 0票数 0

我使用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)以使旋转工作？

谢谢

javascript

jquery

css

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 3

Stack Overflow用户

发布于 2013-01-27 20:00:18

不是将CSS动画绑定到#logo，而是将其绑定到一个类--例如.spin。启动Ajax时，使用addClass将spin类添加到#logo

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

当ajax内容加载完成后，使用removeClass

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

这样你就可以很容易地正常显示徽标，并使它只在ajax激活时旋转。

票数 1

Stack Overflow用户

发布于 2013-01-27 20:01:13

在你的页面中使用像<body class="loading">这样的东西。

然后在页面的底部设置$('body').removeClass('loading');

然后用body.loading #logo选择器定位你的css动画。

页面完全加载后，jquery将删除.loading类，动画将停止。

另外，在您的$.ajax中，您应该在beforeSend添加.loading类，并在complete事件上删除该类。

票数 0

Stack Overflow用户

发布于 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');
            }
        }