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

How to make the animation smoother when one of the list is removed

本文关键字：列表 一个 动画 平滑 删除      更新时间：2023-09-26

我有一个元素列表。单击每个元素时，它们会从列表中删除，并带有一些动画。这种情况是，当一个元素从列表中删除时，其余元素会在没有任何动画的情况下向上移动。所以我可以让它更流畅，而不仅仅是跳跃。这是我的代码块

风格 

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();
});

工作小提琴

你可以先使用 .slideUp（），完成后再使用 .remove（）。

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

如有必要，您还可以控制 slideUp 动画持续时间

.slideUp（ [持续时间] [， 完成 ] ）

$('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>

如果您将高度添加到删除项目动画中，例如 0% 时为 50px，100% 时为 0px，则当列表被删除时，列表将动画化。

@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);
    }
}
相关文章：