javascript - アニメーション セットの前に発生する CSS トランジション

Question

スタイルを変更した要素があります (クラスの変更またはスタイルの変更によって)。

次に、トランジションを追加して、後の変更がアニメーション化されるようにします。

何らかの理由で、トランジションの前にスタイルを設定すると、スタイルはまだアニメーション化されています。これは、Firefox、Chrome、および Safari の最新バージョンで発生しています。

例: http://codepen.io/DavidBradbury/pen/IxfmF

JS スニペット [ライブラリは 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
    }
  })
})