Question

我有一个允许用户对表中的行进行排序的项目。在下拉列表中，我将一个类.dropped分配给已删除的元素。

$(".grammar-input-tbl tbody").sortable({
    items: "tr:not(:last-child)",
    handle: "th",
    placeholder: "ui-state-highlight",
    cursor: "move",
    tolerance: "pointer",
    start: function (event, ui) {
        $(this).find("tr").removeClass("dropped");
    },
    // Add class on drop
    stop: function (event, ui) {
        $(ui.item.context).addClass("dropped");
    }
});

该类确实被添加到元素中。但是，我将此类分配给元素，以便我可以使用关键帧在已删除元素上运行短动画。

.dropped {
    border-left-color: rgb(102, 175, 233);
    animation: borderFadeDrop 2400ms 600ms forwards;
}

@keyframes borderFadeDrop {
    from {border-left-color: rgb(102, 175, 233);}
    to {border-left-color: rgba(102, 175, 233, 0);}
}

然而，奇怪的是，在Edge和Firefox中，JSFiddle（在左边的句柄周围移动行）完全正常，但它没有＆＃39;在Chrome，IE和Opera中。

Answer 1

我一直在寻找错误的地方。问题是，无法解释，will-change。因为我在拖动开始时对行进行了转换，所以我添加了will-change: transform;，但Chrome，IE和Opera在将它与动画结合时似乎并不喜欢它。它在Edge和FF中工作正常。（为简洁起见，删除了前缀）。

tbody tr {
    transition:transform 600ms;
    transform:none;

    border-left:4px solid transparent;
    border-top:1px solid #ddd;

    /* Here she is. Remove to allow border fade */
    will-change: transform;
}
.dropped {
    border-left-color:#66afe9;
    animation:borderFadeDrop 2400ms 600ms forwards
}

@keyframes borderFadeDrop {
    from {
        border-left-color:#66afe9
    }
    to {
        border-left-color:rgba(102, 175, 233, 0)
    }
}

可以找到基本的，清理过的案例here。

Chromium bug报告here。
IE错误报告here。

IE错误因以下原因而被关闭：

您好

感谢您的反馈。此问题似乎已修复   Microsoft Edge。我们目前没有处理功能错误   Internet Explorer与安全相关的问题之外。

最诚挚的问候，Microsoft Edge团队

元素上的动画不会在Chrome，Opera和IE

1 个答案: