Question

Div出现在舞台上，一个“转发”动画出现在它上面，JQuery显然不再“动画”动画的属性。

在示例中，css动画在框的宽度上播放。在OnClick上，JQuery动画会尝试缩小框的宽度和高度，但只会更改高度。这是代码。

$(".a").click(function(e) {
  $(this).animate({
    width: "-=100px", // doesn't work after CSS animation
    height: "-=100px",
  }, 400); 
})

.a {
  background:red;
  position:absolute;
  height:500px;
  width:600px;
  animation: anim 0.4s forwards 1s;
}

@keyframes anim {
  0% {width:600px;}
  100% {width:500px;}
}

有没有办法绕过这个？如果可能的话，我宁愿避免在JQuery中做所有的动画。

Answer 1

仅测试了Firefox，但正在运行 - 我已调整了您的Fiddle添加

$(this).css({
    "width": $(this).width(),
    "animation": "none"
});

点击功能。这会将宽度设置为实际宽度并覆盖动画，但我认为可能有更好的解决方案，因为它看起来像黑客。

更新 - 也适用于Safari和IE。

Answer 2

实际上，您可以在动画完成后将宽度设置为500px，以便DOM元素知道DIV的宽度为500px，并从Element中删除css动画。

$(".a").on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
    $(this).width(500);
    $(this).css({
            "animation": "none"
        });
    $(".a").click(function (e) {
        $(this).animate({
            width: "-=100px",
            height: "-=100px",
        }, 400);
    });
});

基本理念：为避免CSS动画和jQuery动画之间发生冲突，只有在使用animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd事件完成CSS动画并撤消CSS覆盖的规则时才应调用jQuery动画动画并从元素中删除动画。

<强> Working Fiddle

Answer 3

正如你所说，这是通过在动画中使用forward来实现的。

来自CSS Animations Working Draft

CSS动画会影响计算属性值。在执行动画期间，属性的计算值由动画控制。这将覆盖正常样式系统中指定的值。动画会覆盖所有正常规则，但会被！important rules覆盖。

和Animation Duration

[...]并且向前填充的动画将保留在100％关键帧处指定的值，即使动画是瞬时的。此外，动画事件仍然会被触发。

因此，默认情况下不能覆盖它，除了！important规则。但是cannot be done使用jQuery.animate()

如果可能的话，我宁愿避免在JQuery中完成所有动画。

我想你不能。

您可以使用jQuery解决方案：

＆＃13;

$(document).ready(function() {
  $('.a').delay(1000).animate({
    width: "-=100px"    
  }, 400);
  
});

$(".a").click(function(e) {
  $(this).animate({
    width: "-=100px", // doesn't work after CSS animation
    height: "-=100px",
  }, 400); 
})

＆＃13;

.a {
  background:red;
  position:absolute;
  height:500px;
  width:600px;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a"></div>

＆＃13;

Answer 4

我不确定这是否是一个选项，因为效果与你的目标略有不同，但我只是想把它作为替代品。

问题显然是由（http://w3.org/TR/css3-animations/#animations）

引起的

动画会覆盖所有正常规则，但会被！important覆盖规则

因此，您可以尝试动画scale转换。这样您就不会改变通过动画设置的属性。 jQuery不支持开箱即用，但这个插件添加了功能：https://github.com/rstacruz/jquery.transit。

这也有一个巨大的附加优势，即更好的性能然后设置你的宽度和高度动画，这里有很好的解释：http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

这种方法的缺点是你的div的内容也按比例缩小，这可能不是预期的效果。

我已经设置了演示来演示：http://jsfiddle.net/nxsv5dgw/13/

代码：

$(".a").click(function (e) {
    $(this).transition({
        scale: '-=0.1'
    }, 4000);
});

在“转发”css动画之后，JQuery无法动画div

4 个答案: