元素上的动画无法在 Chrome、Opera 和 IE 中运行

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 上运行良好（通过左侧的句柄移动行），但在 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 错误报告 here。
• IE 错误报告here。

IE bug 已关闭，原因如下：

你好

感谢您的反馈。此问题似乎已在 微软边缘。我们目前不处理中的功能错误 Internet Explorer 之外的安全相关问题。

此致，Microsoft Edge 团队