Javascript覆盖CSS样式不适用于关键帧动画

我有一个问题，覆盖CSS样式的元素有类

我正在使用

关键帧

动画CSS类

查看现场直播：

HTML:

<div id="sidebar" class="animation">this is sidebar</div>
<div id="trigger">this is trigger</div>

JS:

为什么侧边栏不移动？CSS样式已经添加到其中。但是不动

我的代码怎么了

---

提前感谢…

动画完成后，您需要删除类

slideInLeft

$("#trigger").on("click", function() { // trigger for opening #sidebar
    $("#sidebar").addClass("slideInLeft block"); // addClass, so it animated
    setTimeout(function(){
            $("#sidebar").removeClass('slideInLeft');
    }, 500);
});

同时添加另一个类以保持

显示：block

.block{
    display: block !important;
}

---

这是因为div有

slideInLeft

类。鼠标移动时将其移除

$(this).removeClass('slideInLeft');

$("#sidebar").on("mousemove", function(e) { 
   e.preventDefault(); 
   $(this).removeClass('slideInLeft');
   $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
});

意味着侧边栏将在动画结束时保持样式！如果删除动画填充模式样式，则一切正常

---

有关的详细信息。

类slideInLeft中的动画将阻止显示更新

如果您将css更新代码更改为此，您将看到结果。您仍然需要display:block，因此仅删除该类将不起作用

$(this).removeClass('slideInLeft');
$(this).css({"display":"block","transform": "translate3D(" + e.pageX + "px, 0, 0)"}) // add style for move #sidebar, look at this element, not working. what's wrong here?

---

应用的更改

因此，我只需要将其设置为

动画填充模式：无$("#sidebar").on("mousemove", function(e) { 
   e.preventDefault(); 
   $(this).removeClass('slideInLeft');
   $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
});

animation-fill-mode: both;

$(this).removeClass('slideInLeft');
$(this).css({"display":"block","transform": "translate3D(" + e.pageX + "px, 0, 0)"}) // add style for move #sidebar, look at this element, not working. what's wrong here?