問題タブ [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.
unit-testing - 単体テストのフェード アウト ディレクティブ - 追加された正しい CSS クラスが表示されない - 角型 & ジャスミン
私が作成した非常に単純なディレクティブをテストしようとしています。
このディレクティブは、一部の要素を 1 秒間表示し、その後フェードアウトします。(ここに問題を示すフィドルがあります)
fadingOut アニメーション angular を実行するには、「ng-hide-add」クラスを要素に追加する必要があることを知っています。つまり、テストしようとしています。ブラウザーでは動作します (フィドラーから angular-mocks を削除すると実行されます) が、単体テストでは、このテストは何らかの理由で失敗します。
ng-animateの注入と関係があると思います...
よろしくお願いします
css - Angular ngAnimate により、幅のアニメーションがジャンプする
ngAnimate
いくつかのケースでAngular を使用しています。別の例では、(Bootstrap クラスを使用して) 列の幅を変更するディレクティブとcol-md-*
、次のような単純な遷移があります。
ここで明示的に使用してngAnimate
いるわけではありませんが、単に含まれているだけで悲しみを引き起こしていることは確かです. 基本的に、遷移は新しい幅に遷移する前にゼロにジャンプします。ngAnimate
モジュールから削除すると、移行はスムーズngAnimate
ですが、アプリの他の機能が必要です。
ngAnimate
プレーンな CSS トランジションに対して行っていることを無効にすることはできますか? これを修正するにはどうすればよいですか? 私を夢中にさせます。
ここに問題を示すフィドルがあります。再現手順については、コメントを参照してください。
javascript - Angular js - ホームページではなくスライド ビュー - ng-animate
私はng-animateを使用してアプリのビューをスライドさせているので、各ルートは独自のビューをスライドさせます。これは私の簡単なコードです:
html:
CSS:
今、私は疑問に思っています、is there anyway to exclude the home page (main "/" route) from sliding?
言い換えれば、ng-animate からルートを除外する方法はありますか?
angularjs - AngularJS アニメーションの完了後にコードを実行する
によって可視性が切り替えられる要素がありng-show
ます。また、この要素で CSS アニメーション (ng-animate の自動アニメーション) を使用して、そのエントリをアニメーション化しています。
この要素には、画像または動画が含まれます。
要素にビデオが含まれている場合、再生したいのですが、アニメーションが終了するまでビデオを再生したくありません。
そのため、コールバックをAngularJSのCSSアニメーションの最後にバインドする簡単な方法があるかどうか疑問に思っていましたか?
ドキュメントはadoneCallback
を参照していますが、それを指定する方法がわかりません...
私が考えた1つの回避策(?)は、削除されたばかりであることを意味し、 で起動$watch
するのelement.hasClass("ng-hide-add-active")
を待ってい(true, false)
ます..
より良い方法はありますか?
angularjs - Angular アニメーション + $templateCache
ngAnimate を使用する SPA があります。このアプリが $templateCache なしで動作する場合、アニメーションは正常に動作しますが、$templateCache からテンプレートを読み込もうとするとアニメーションは動作しません。おそらく、アプリケーションが $templateCache を使用する場合は、いくつかの構成を追加する必要があります...
この問題を解決するにはどうすればよいですか?
私の見解
アプリ