CSSトランジションを使用して、クリック時に要素を画面上のある位置から別の位置に移動するディレクティブを作成しようとしています。位置は要素のJavascript /属性によって決定され、事前に知られていません書かれたCSS。また、$scope 内の関数へのコールバックが必要です。これは、カスタム属性で指定されたトランジションの最後に行われます。したがって、要素は次のようになります
<button move-me="100" move-me-after="afterMove()">Move Me!</button>
これに $animate を使用するために、カスタム ディレクティブ moveMe で、クリック時にスタイル ブロックを動的にページに追加します。
<style> .move-me-1 {....}</style>
そして使用する
$animate.addClass(iElement, 'move-me-1', function() { ... });
終了したら、アニメーションとコールバックを処理します。plunkr の例は、次の場所にあります。
http://plnkr.co/edit/XRMRO93vl248Ve02Jnpo?p=preview
これは非常に複雑に思えます。スタイルタグをページに追加するのは非常に複雑に思えます。私がこれを行っているのは、トランジション自体を実行時間とタイミング関数に関して外部スタイル シートで指定できるようにし、$animate.addClass を使用して、Angular がコールバックを起動する正しい時間を決定できるようにするためです。
私が望むものを達成するためのより簡単な/より良い方法はありますか?
この例は、実際の使用例に合わせて単純化されています。私の場合、アニメーション化された要素はディレクティブで作成され、最後に削除され、純粋に一時的な視覚補助です。位置に加えて、要素の開始スタイルと最終スタイルの両方について、状態間の CSS トランジションを使用して、高さと幅も動的に決定されます。各スタイルは、私が求めている効果を達成するために、異なる遷移時間 + タイミング関数を持つことができます。複数の要素を同時に異なる位置に移動したり、異なる位置から移動したりできるため、JS/CSS でそれを許可する必要があります。