Question

我有一个元素，我改变了它的风格（通过更改类或修改样式）。

然后，我希望添加一个转换，以便稍后更改动画。

出于某种原因，当我在转换之前设置样式时，样式仍然是动画的。这种情况发生在最新版本的Firefox，Chrome和Safari中。

实施例： http://codepen.io/DavidBradbury/pen/IxfmF

JS Snippet [库是jQuery但它应该无关紧要]：

$(function() {
  $("#toggle").on({
    click: function(e) {
      // ## Change the class / style
      // At this point, it shouldn't know that
      // a transition will be added
      $("#badidname").toggleClass('newclass');

      // Then add the transition
      $("#badidname").css({
        "transition": "all 600ms"
      });

      // For some reason, it animates 
      // the class being added
    }
  })
})

Answer 1

您需要在超时中包含转换：

setTimeout(function() { $("#badidname").css({ "transition": "all 600ms" }); }, 0);

以下是setTimeout(..., 0); setTimeout with zero delay used often in web pages, why?

奇怪的一个很好的解释

动画集之前发生的CSS转换

1 个答案: