Question

我尝试创建一个函数，当页面在底部滚动时添加元素，如果我使用淡入淡出，则一切正常，但如果我想用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; }
}

对不起英语，任何帮助将不胜感激

Answer 1

使用此选项添加新元素：

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

<强> Sample fiddle

jquery将css动画添加到附加元素

1 个答案: