問題タブ [angularjs-animation]

以前の質問に基づいて、Angular 1.1.4 にアップグレードし、アニメーション システムを試してみることにしました。以前やっていたことができなくて困っています。ユーザーが要素をクリックすると、ng-repeat 要素に追加されます。次に、この要素のアニメーションによって、コンテナーが適切な位置にスクロールされ、要素が表示されます。その部分は問題なく動作します。

すべての要素を置き換えているときに、スクロール動作が発生したくない場合もあります。以前は、スコープに変数を配置し、カスタム ディレクティブでその変数を参照することで、これを管理していました。次に、ロード後に変数を切り替えるためにタイムアウトを設定します。アニメーション システムでは、タイムアウトが機能しなくなりました。

プログラムの特定のアクティビティ中に、アニメーションの特定の部分をオン/オフする方法が必要です。どうやってやるの？

http://codepen.io/cflynn07/pen/hbgxf
^ 例

angularjs アニメーションがあり、非表示にする必要がある要素のページ読み込み時に実行したくありません。

現在、要素が表示されていると、スライドアップ アニメーションが発生し、要素が非表示になります。

AngularJS でさまざまなトランジションを有効にするにはどうすればよいですか。たとえば、Web アプリケーションにサイドバーがあるとします。ユーザーがボタン X をクリックすると、サイドバーは非常に速く消えます。ユーザーが別のボタンをクリックすると、サイドバーはゆっくりと消えます。

これは、いずれかのクリックの後にトランジション オプションの値を設定し、サイドバーの表示状態を変更することで機能すると思います (トランジション ディレクティブによって監視されます)。

しかし、それは私にとって少し悪いスタイルのようです. これを行う一般的な方法はありますか？

私の質問はthis oneとthis oneに似ていますが、AngularJS 1.2.0 の新しいアニメーションが関係しています。

基本的に、サインアップ ページには、最初は非表示で、特定のフォーム要素が無効な場合にのみ表示される一連の要素があります (それらは無効なフォーム要素を指し、「パスワードは少なくとも 8 文字である必要があります」などのメッセージを表示します)。 . これらのメッセージは、表示/非表示に応じてフェード インおよびフェード アウトします。

しかし、登録ページが表示されるとすぐに要素が表示され、フェードアウトします。それらは短時間表示されます (ng-cloak が必要な状況の場合のように、画面上で「点滅」または「フラッシュ」します)。

これは、私が経験している動作を示すためのプランカーです。このプランカーでは、ボックスとボックスの可視性を切り替えるボタンを含む基本的なルート (「ログイン」ページ) を設定しました。[実行] をクリックすると、ボックスがフェードアウトすることに注意してください。隠せばいいだけ。(アニメーションの発生を確認できるように、意図的にアニメーションを遅く設定しています)。

アニメーションが最初に発生しないようにするにはどうすればよいですか?

私が試したこと：

• ng-cloakアニメーション要素に設定します。
• ルールを追加して使用ng-cloakします。display: none !important(こちらをご覧ください)
• display: none要素の「初期設定」であるかのように、要素に設定します。(こちらをご覧ください)

興味深いことに、このプランカーは適切に動作し、アニメーションは最初は発生しません。この plunker はルーティングを使用せず、コントローラーは body タグで明示的に設定されます。でもルーティングを使いたい。

Javascript を介して幅を変更するコンテナーがあります。そこで、$animator を使ってアニメートしたいと思います。

どうすれば次のようなことができますか:

?

それを変更するための CSS スタイルがないことに注意してください。別のコンテナでやったのですが、今回はjsを使う必要があります。

注入時に次のエラーが表示されますangular-animate.js。 Unknown provider: $animateProvider from ngAnimate

ここに私のapp.jsがあります:

の頭は次のindex.htmlとおりです。

Bootstrap だけでも問題なくロードされます。

私は何を間違っていますか？

ここにplnkrがあります

私はng-show #animationを使用しています。

index.html: -

templateURL には以下が含まれます:-

上記のコードでは、ページの読み込み時に templateURL ファイルが表示されたり、スライドアップしたりしてはなりません。

次の 2 つの plunkr を表示してください。

これは予期される動作です

これは、ngAnimate と ngRoute を一緒に使用した場合の動作です。

さまざまな種類のフィルターでフィルター処理したいアイテムの配列があります。2000 を超えるアイテムがあるため、ページ間でページ分割したいので、startFrom ディレクティブを作成し、angulars limitTo ディレクティブを使用しました。これはすべて正常に機能していますが、ここに私の問題があります:

このページでは、次/前の矢印を使用してページ間をトゥイーンします。したがって、次のボタンをクリックすると、既存の div の後に新しい div が挿入され、新しいページにトゥイーンされます。トゥイーンが完了したら、古いページを破棄したいと思います。Angular 1.0.8 を使用しているため、ng-animate を使用できません。これを実現するための最良のアプローチは何ですか？

よろしくお願いします！

編集: スライドを作成するために、データオブジェクトを新しいオブジェクトに解析しようとしました:

データベースからのデータ:

操作後:

問題は、フィルターが変更されるたびにオブジェクトを再構築する必要があるため、これはかなり重いことです。