jquery - position: left の代わりに css3 translate を使用する

Question

Translate() を使用した要素の移動が Pos:abs より優れている理由 Top/left 参考記事 ポール アイリッシュ

私の人生では、このcss3変換アニメーションを機能させることはできません。そこで、動作と同じjqueryインタラクションを作成しました。.navi-toggle左上隅の X をクリックして、動作を確認します。これはややぎこちなく、translate() がどれだけうまく機能するか非常に興味があります。

コデペン

HTML

<div id="page-container"> 
  <nav id="route-bar" >
  </nav>
  <div class="w-panel">
      <div class="navi-toggle">X</div>
      <div class="panel">
  </div><!--end of w-panel-->
</div><!--end of page container-->

CSS

.open-panel
    {
        left:336px;

    }

コーヒースクリプト

$(".navi-toggle").on
  click: ->
    $(".w-panel").toggleClass "open-panel"

Answer 1

翻訳についてはわかりませんが、代わりにマージンを使用できます。