0

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

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

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

1 回答 1

1

您需要将转换包装在超时中：

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

这里有一个很好的解释setTimeout(..., 0); setTimeout 在网页中经常使用的零延迟，为什么？

于 2013-07-04T17:19:06.943 回答