Javascript JQuery无法在“之后设置div动画”；“远期”；css动画

参见示例

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中执行所有动画

正如您所说，这是通过在动画中使用

forward

实现的

从

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

及

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

因此，它在默认情况下不能被覆盖，除了！重要规则。但是使用jQuery.animate（）

如果可能的话，我宁愿避免在JQuery中执行所有动画

我想你不能

您可以使用jQuery解决方案：

$（文档）.ready（函数（）{
$（'.a'）。延迟（1000）。设置动画({
宽度：“-=100px”
}, 400);
});
$（“.a”）。单击（函数（e）{
$（此）。设置动画({
宽度：“-=100px”，//在CSS动画后不起作用
高度：“-=100px”，
}, 400); 
})

.a{
背景：红色；
位置：绝对位置；
高度：500px；
宽度：600px；
}

---

仅针对Firefox进行了测试，但仍在运行-我已调整了您的添加

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

---

更新-也适用于Safari和IE。

实际上，在动画完成后，您可以将宽度设置为

500px

，以便DOM元素知道DIV具有宽度

500px

，并从元素中删除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动画覆盖的规则并从元素

---

我不确定这是否是一种选择，因为效果与您的目标略有不同，但我只是想将其作为一种替代方案

这个问题显然是由以下事实造成的：）

动画会覆盖所有正常规则，但会被！重要的 规则

因此，您可以尝试设置

缩放

变换的动画。这样，您就不会更改通过动画设置的特性。jQuery不支持开箱即用，但此插件添加了以下功能：

这还有一个巨大的附加优势，即性能大大优于设置宽度和高度的动画，如下所述：

这种方法的缺点是div的内容也被缩小了，这可能不是理想的效果

我已经设置了一个演示来演示：

以及守则：

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

---

您不想使用jQuery，但已经在使用它了<代码>。动画会覆盖所有正常规则，但会被！重要规则是正确的，我想尽量减少使用JQuery。注意：使用

.on（）

比使用

.bind（）

更好。后者已被弃用。如果在css动画完成之前单击element，是否与element的css动画冲突？@GauravKalyan感谢您的提及。是的，确实如此，也许这不是一个可以忽略的小细节（尽管对于示例动画，您必须快速单击）。因此，我写道可以有一个更干净的解决方案，在动画结束后添加单击事件（就像您在回答中所做的那样）对我来说似乎是更干净的方式。感谢您的澄清：）

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