Question

我有一个元素列表。点击每个元素后，他们会从列表中删除一些动画。场景是，当从列表中删除元素时，其余元素向上移动而没有任何动画。所以我可以使这更顺畅，而不仅仅是跳跃。这是我的代码块

风格

li{
    list-style-type: none;
    padding: 10px;
    cursor: pointer;
}
li.removed-item {
    animation: removed-item-animation 1s cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
    /*transform origin is moved to the bottom left corner*/
    transform-origin: 0% 100%;
}

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: rotateZ(0);
}

    100% {
        opacity: 0;
        transform: translateY(600px) rotateZ(90deg);
    }
}

Jquery的

$('li').click(function () {
    $(this).addClass('removed-item').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
              $(this).remove();
           });
    e.stopImmediatePropagation();
});

Working Fiddle

Answer 1

您可以先使用.slideUp()，然后再使用.remove（）。

$('li').click(function () {
    $(this).addClass('removed-item').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
        $(this).slideUp(function(){
           $(this).remove();
        });
    });
});

您还可以根据需要控制slideUp动画持续时间

.slideUp（[duration] [，complete]）

$('li').click(function () {
    $(this).addClass('removed-item').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
        $(this).slideUp(function(){
            $(this).remove();
        });
    });
});

li {
    list-style-type: none;
    padding: 10px;
    cursor: pointer;
}
li.removed-item {
    animation: removed-item-animation 1s cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
    /*transform origin is moved to the bottom left corner*/
    transform-origin: 0% 100%;
}
@keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: rotateZ(0);
    }
    100% {
        opacity: 0;
        transform: translateY(600px) rotateZ(90deg);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>List 1</li>
    <li>List 1</li>
    <li>List 1</li>
    <li>List 1</li>
    <li>List 1</li>
    <li>List 1</li>
    <li>List 1</li>
    <li>List 1</li>
    <li>List 1</li>
</ul>

Answer 2

如果您为remove-item-animation添加高度，假设50px为0％，0px为100％，那么当列表被移除时，列表将会动画。

@keyframes removed-item-animation {
    0% {
        padding: 0px 10px;
        height: 50px;
        opacity: 1;
        transform: rotateZ(0);
    }
    100% {
        padding: 0px 10px;
        height: 0px;
        opacity: 0;
        transform: translateY(600px) rotateZ(90deg);
    }
}

如何在删除其中一个列表时使动画更流畅

2 个答案: