javascript - JQuery 无法在 "forwards"css 动画后对 div 进行动画处理

Question

查看示例 http://jsfiddle.net/nxsv5dgw/

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。