問題タブ [angularjs-animation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 高さの単純なangualrjsアニメーション
これを行う方法について何週間も検索しましたが、Angular animate と生成された css クラス (つまり ngRepeat) を使用して、要素が DOM に「入る」および「出る」ときに要素をアニメーション化する方法を取得しました。私が理解できていないのは、単純なイベントベースのアニメーションを行う方法と、そのイベントを「キャッチ」する方法です。
たとえば、angular と css だけを使用して次のことを行うにはどうすればよいでしょうか。
ページに 2 つの div (A と B) があります。どちらも高さ 50 ピクセル、幅 50 ピクセルで、左にフロートされているため、隣り合っています。A に関連付けられた ng-click ディレクティブが1 つあります。A をクリックすると、その高さがウィンドウの高さの 80% に移行する必要があります (できれば、これは HTML 要素の属性として設定できるはずです)。
同時に、 B は遷移を反映し、最終的に同じ高さに到達する必要があります。<h4>Transition Done</h4>また、遷移が完了すると、 B に が注入されるはずです。
これはjQuery のようなものを使用して行うのは非常に簡単ですが、私は物事を行う「角度のある」方法を学ぼうとしています。誰か私に手を貸してくれませんか？
javascript - 子要素の AngularJS animate は 1 回目は機能し、2 回目は失敗します
ここで、角度のあるアニメーションで奇妙な問題が発生しています。画面の「深さ」に応じて画面間を遷移し、方向を変えるアニメーションを行っています。
注意が必要なのは、静的部分と可動部分の 2 つの部分があることです。そのため、このように実装しています。1 回目は正しく動作し、2 回目は正しく動作しないことがわかります。ng-enter は移行をうまく行いません。
ここでプランカーを見ることができます：
angularjs - 読み込み中のAngular animateエラー
この角度のあるシンプルなページを開発しています。必要なコンポーネントをインストールするために Bower を使用していますが、アプリケーションは完全に機能していました。Angular animate ライブラリを利用することを決定するまで。最初に、どの「適切な」Angularライブラリを使用する必要があるかを尋ねられたBowerを使用しました.1.2.6（すでにインストールされて動作している）または1.2.14です。
したがって、1.2.6 を選択すると、追加直後にエラーが発生します。
は
キャッチされないエラー: [$injector:unpr] 不明なプロバイダー: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile
他のバージョンを選択すると、ng-class の使用を認識していないように見えるコードに問題が移ります。
私は ng-class="testClass" を持つ要素と私が持っているリスト要素を持っています:
私がanimations.cssに持っている場所：
ページの読み込み中に次のエラーが表示されます。
最初の関数と angular の css フックの使用の両方を同じ ng-click で一緒にすることはできないようです。
2 つの問題のうち少なくとも 1 つを解決できますか :) ?..
css - AngularJS - あるコンテナから別のコンテナへのアイテムのアニメーション化
私は 2 つの div を持っています。1 つは空で始まり、もう 1 つは定義済みの項目があります。一方のリストの項目をクリックすると、もう一方のリストに項目が追加されます。
私が達成したいのは、あるリストのアイテムをアニメーション化して、物理的に別のリストに移動するように見せることです。（アイテムを右から左に移動したい）。CSS アニメーションや AngularJS アニメーションについてはよくわかりません。jQuery では、div id で $().animate() を呼び出すだけでプロパティを変更できます。
AngularJS で同じことを行うにはどうすればよいでしょうか?
JS:
HTML:
ここに私がこれまでに持っているものへのリンクがあります：
javascript - AngularJS .ng-enter アニメーションが初回実行時に機能しない
AngularJS アプリで奇妙な問題が発生しました。ng-include を使用したタブ スライドの切り替えのアニメーションは、最初は機能しませんが、2 回目または 3 回目では正常に機能します。
plunker での私のテスト コードは次のとおりです。
ng-enter アニメーション クラス、設定前、テンプレート アップロードのように見えます。助けてください。
angularjs - AngularJS Animate で ng-leave-stagger を使用する方法
私は AngularJS でアニメーションを調査していますが、ずらした CSS アニメーションを動作させる際に問題が発生しました。新しいアイテムが追加されると問題なく動作しますが、複数のアイテムが同時に削除されると、アイテムはコレクションの後ろからではなくコレクション内から削除されます。つまり、アイテムは予想とは逆の順序で削除されます。
HTML:
JavaScript:
CSS:
ここで問題を文書化した JSFiddle を作成しました: http://jsfiddle.net/VNB7R/
これは既知の問題ですか、それとも JS コードまたは CSS で何か間違ったことをしていますか?