4

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

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

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

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

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

私が試したこと：

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

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

4

1 に答える 1

1

使用している角度のバージョンに問題があります。Angular animate は 1.2 で大きく変わったと思うので、これを試してみてください:

<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>

確認してください、ここであなたのプランカーをフォークしました

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

于 2014-03-16T18:36:04.113 に答える