Question

我在有类的元素上覆盖CSS样式时遇到问题。

我正在使用keyframe动画CSS类。

检查this fiddle是否有实际操作：

HTML：

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

CSS：

#sidebar {width:225px; height:100%; background:red; position:fixed; top:0; left:0; display:none; }
#trigger {float:right; }
.animation {animation-duration: 0.5s; animation-fill-mode: both; }

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }

}

.slideInLeft {
  animation-name:slideInLeft;
  display:block !important;
}

JS：

$(document).ready(function() {
    $("#trigger").on("click", function() { // trigger for opening #sidebar
        $("#sidebar").addClass("slideInLeft"); // addClass, so it animated
    });

    $("#sidebar").on("mousemove", function(e) { // move #sidebar according mousemove
        e.preventDefault(); // reset default behavior
        $(this).css("transform", "translate3D(" + e.pageX + "px, 0, 0)") 
        // add style for move #sidebar, look at this element, not working. what's wrong here?
    });
});

为什么#sidebar没有移动？已经添加了CSS样式。但不动了。

我的代码出了什么问题？

提前感谢...

Answer 1

animation-fill-mode: both;

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

animation-fill-mode的更多信息。

Answer 2

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

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

还要添加其他类以保留display:block。

.block{
    display: block !important;
}

DEMO

Answer 3

这是因为div有slideInLeft类。在鼠标移动时将其移除。

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

<强> Fiddle

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

Answer 4

类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?

已应用更改https://jsfiddle.net/e9tzurnf/

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

4 个答案: