0

ページが一番下にスクロールするときに要素を追加する関数を作成しようとしましたが、フェードを使用するとすべてうまくいきますが、フェードをCSSアニメーションに置き換えたい場合(addClassによる)、最新のものだけでなく、追加されたすべての要素に影響します。 ..

html

<ul class="clearfix" id="item">
    <li style="width: 100px; height: 100px; margin: 5px; float: left; background-color: #808080;"></li>
    ... // same line
    <li style="width: 100px; height: 100px; margin: 5px; float: left; background-color: #808080;"></li>
</ul>

これが私のスクリプトです

$(function() {
    var container = $('#item');
    var newel = $('#item').html();
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            $(newel).hide().appendTo(container).fadeIn(1000).addClass('animate');
        }
    });
});

ここにCSSがあります

    .clearfix:before,.clearfix:after {
        content: " ";    /* 1 */
        display: table;    /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }

    #item {
        width: 600px;
        margin: 0 auto;
        -webkit-perspective: 1300px;
        -moz-perspective: 1300px;
        perspective: 1300px;
    }

    #item li.animate {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotateX(-80deg);
        -moz-transform: rotateX(-80deg);
        transform: rotateX(-80deg);
        -webkit-animation: flip .8s ease-in-out forwards;
        -moz-animation: flip .8s ease-in-out forwards;
        animation: flip .8s ease-in-out forwards;
    }

@-webkit-keyframes flip {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes flip {
    100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
    100% { transform: rotateX(0deg); opacity: 1; }
}

英語で申し訳ありませんが、助けていただければ幸いです

4

1 に答える 1

4

これを使用して、新しい要素を追加します。

$('<li>').appendTo(container).addClass('animate');

サンプルフィドル

于 2013-07-12T23:02:29.900 に答える