动画集之前发生的 CSS 过渡答案

【问题标题】：CSS Transition Happening Before Animation Set动画集之前发生的 CSS 过渡
【发布时间】：2013-07-04 16:46:50
【问题描述】：

我有一个元素的样式已更改（通过更改类或修改样式）。

然后我希望添加一个过渡，以便以后的更改将被动画化。

由于某种原因，当我在过渡之前设置样式时，样式仍然是动画的。这发生在最新版本的 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
    }
  })
})

【问题讨论】：

标签： javascript css html transition transitions

【解决方案1】：

您需要在超时中包装过渡：

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

这里有一个很好的解释setTimeout(..., 0);setTimeout with zero delay used often in web pages, why?的奇怪

【讨论】：

完美，非常感谢。这似乎有点hacky，但我可以理解为什么会这样做。