問題タブ [ng-animate]

ng-animate と ng-view で 3D キューブ エフェクト アニメーションを取得しようとしています。

別のページに切り替えるときに、立方体で回転しているように感じたい. 「Go Page 2」をクリックすると、実際の「Page 1」が左に回転し、「Page 2」が右から到着します。

何かが近づいていますが、CSSトランジションが非常に汚いため、ページを切り替えると、それらが「固執」しません。

コードサンプル: http://jsfiddle.net/bnyJ6/

私はこのように試しました：

HTML :

角JS：

CSS3-Dirty- アニメーション:

この 3D キューブ エフェクト アニメーションを取得する方法を知っていますか?

あなたが提供できるあらゆる種類の助けに感謝します。

問題は、カスタム JavaScript アニメーションを使用する requireJS および ngAnimate に関する問題です。主に setup メソッドと start メソッドは呼び出されません。ファイルがrequireJS経由でロードされていることを確認できますが、アニメーションは起動されません。すべての指示に従っているにもかかわらず、自分のコードが間違っていると思い始めています。誰かが RequireJS の実装を投稿できますか? または私のエラーを指摘しますか？

アニメーションを実行する方法は次のようになると思います

アニメーションの宣言が不適切ですか、それともこのコードに何か問題がありますか?

ng-view を使用した div 要素がありますが、これは完全に正常に機能します。CSS トランジションを使用して単純なスライドを作成しようとしましたが、アニメーションのすべての努力が役に立たず、要素が瞬く間に現れたり消えたりするようです。AngularJS 1.1.4 と 1.1.5 の両方を試しましたが、役に立ちません。アイデアはありますか？

コードは次のとおりです。

home.html

アニメーション.css

私は AngularJS を初めて使用し、次の jQuery コードを AngularJS に移行しようとしています。

AngularJS に変換し始めた HTML は次のようになります

ユーザーがアプリを操作すると、要素が ng-repeat リストに動的に追加されるため、jQuery.on() が使用されます。不安定なバージョンの AngularJS を使用しても問題ありません。

AngularJS で jQuery フラグメントをどのように書き直せばよいですか? 新しいディレクティブを追加したり、ng-animate で遊んだりするなど、いくつかのことを試しました。しかし、jQuery コードを ng コントローラーに追加すると、見苦しくなり始めました。ハイブリッドは避けたいと思います。

どうもありがとう！

ビュー間で単純なスライド効果を生成するために ng-view を使用しようとしています。私がそれを正しく行っているかどうかはわかりません。コードは次のとおりです。

スクリプト: (1.15)

ルーティング：

ビューを切り替えるために使用される ng-view と ng-click を含む HTML:

ビューの切り替えに使用するコントローラ fn:

アニメーション効果の実装に使用される CSS:

コンテンツは引き続き表示され (ただし、ちらつきがあります)、スライド アニメーションは機能しません。どんな助けでも大歓迎です。

更新: CSS 構文を 1.15 に修正しました。残念ながら、まだ機能していません。私はフレックスボックスを使用していますが、これが問題の原因だと考えています。ng-animate + flexbox を使用するときに同様の問題を抱えている人はいますか?

何か (アニメーション) が動作していますが、見栄えがよくありません。

アニメーション/スライドがトリガーされたとき。「出る」スライドが画面の左側に飛び出し、「入る」スライドを抱き締めます。

また、アニメーション中にエンドポイントをオーバーシュートした後、元に戻ります。私の ng-animate css は次のとおりです。

css:

これは、半作業の plunkr です。「出る」ビューが「入る」ビューを抱き締めていることに注意してください。ヘッダーの黒い四角を押すと、アニメーションを開始できます。

http://plnkr.co/edit/FG44cpJ65S4Gr6QZpm1X?p=preview

私は AngularJS 1.1.5 を使用しており、daneden の animate.css で ng-animate ディレクティブを試しています。ルーティングを使用していくつかのビューを設定しています。Twitter Bootstrap 3 RC1 を使用しています。

ng-view のコードは次のとおりです。

そして、ここにルーティング部分があります：

アニメーションが機能し (つまり、アニメーション効果が表示されます)、ビューも変化します。

私が問題を抱えているのは、「入る」ビューがアニメーション化されている間、「出る」ビューがまだスペースを占有しているように見えることです.

その効果は、新しいビューの開始アニメーションが、終了するビューによって以前に占有されていたスペースの下で発生することです。既に「アニメーション化」されているにもかかわらず、古いビューがまだそこにあるかのようです。アニメーションが終了すると、新しいビューが突然適切な位置に急上昇します。入力にはfadeInRightBigを、退出にはfadeOutLeftを使用しています。

これはどのように修正できますか？期待される結果は、こちらのスライド 1 から 3 の ng-switch のアニメーションのように、ぎくしゃくすることなくスムーズに移行することです。（もちろん、ng-viewを使用していることを除いて。）

ありがとう！

編集：

「Enter」アニメーションが実行されている間、「Leave」アニメーションは完全に終了していません。

だから私の質問は少し変わると思います..しかし、期待される結果は同じです。スムーズな「スライド」効果を実現するにはどうすればよいですか?