問題タブ [ng-animate]

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.

0 投票する
1 に答える
785 参照

unit-testing - 単体テストのフェード アウト ディレクティブ - 追加された正しい CSS クラスが表示されない - 角型 & ジャスミン

私が作成した非常に単純なディレクティブをテストしようとしています。

このディレクティブは、一部の要素を 1 秒間表示し、その後フェードアウトします。(ここに問題を示すフィドルがあります)

fadingOut アニメーション angular を実行するには、「ng-hide-add」クラスを要素に追加する必要があることを知っています。つまり、テストしようとしています。ブラウザーでは動作します (フィドラーから angular-mocks を削除すると実行されます) が、単体テストでは、このテストは何らかの理由で失敗します。

ng-animateの注入と関係があると思います...

よろしくお願いします

0 投票する
1 に答える
1902 参照

css - Angular ngAnimate により、幅のアニメーションがジャンプする

ngAnimateいくつかのケースでAngular を使用しています。別の例では、(Bootstrap クラスを使用して) 列の幅を変更するディレクティブとcol-md-*、次のような単純な遷移があります。

ここで明示的に使用してngAnimateいるわけではありませんが、単に含まれているだけで悲しみを引き起こしていることは確かです. 基本的に、遷移は新しい幅に遷移する前にゼロにジャンプします。ngAnimateモジュールから削除すると、移行はスムーズngAnimateですが、アプリの他の機能が必要です。

ngAnimateプレーンな CSS トランジションに対して行っていることを無効にすることはできますか? これを修正するにはどうすればよいですか? 私を夢中にさせます。

ここに問題を示すフィドルがあります。再現手順については、コメントを参照してください。

0 投票する
7 に答える
9803 参照

javascript - Angular js - ホームページではなくスライド ビュー - ng-animate

私はng-animateを使用してアプリのビューをスライドさせているので、各ルートは独自のビューをスライドさせます。これは私の簡単なコードです:

html:

CSS:

今、私は疑問に思っています、is there anyway to exclude the home page (main "/" route) from sliding?

言い換えれば、ng-animate からルートを除外する方法はありますか?

0 投票する
3 に答える
22451 参照

angularjs - AngularJS アニメーションの完了後にコードを実行する

によって可視性が切り替えられる要素がありng-showます。また、この要素で CSS アニメーション (ng-animate の自動アニメーション) を使用して、そのエントリをアニメーション化しています。

この要素には、画像または動画が含まれます。

要素にビデオが含まれている場合、再生したいのですが、アニメーションが終了するまでビデオを再生したくありません。

そのため、コールバックをAngularJSのCSSアニメーションの最後にバインドする簡単な方法があるかどうか疑問に思っていましたか?

ドキュメントはadoneCallbackを参照していますが、それを指定する方法がわかりません...

私が考えた1つの回避策(?)は、削除されたばかりであることを意味し、 で起動$watchするのelement.hasClass("ng-hide-add-active")を待ってい(true, false)ます..

より良い方法はありますか?

0 投票する
0 に答える
152 参照

angularjs - Angular アニメーション + $templateCache

ngAnimate を使用する SPA があります。このアプリが $templateCache なしで動作する場合、アニメーションは正常に動作しますが、$templateCache からテンプレートを読み込もうとするとアニメーションは動作しません。おそらく、アプリケーションが $templateCache を使用する場合は、いくつかの構成を追加する必要があります...

この問題を解決するにはどうすればよいですか?

私の見解

アプリ