ホームページ > 記事 > ウェブフロントエンド > Angular 2 で CSS トランジションを ngIf で機能させるにはどうすればよいですか?
質問:
Angular で div を表示するために ngIf を利用する場合2、要素が初期状態の場合、CSS トランジションが機能しないのはなぜですかhidden?
答え:
ngIf は、条件が false になったときに DOM から要素を削除します。ただし、存在しない要素にトランジションを適用することはできません。
解決策:
スムーズなトランジションを実現するには、[ngIf] の代わりに [hidden] を使用します:
<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>
このようにすると、要素は DOM に残り、show プロパティのときにトランジションを適用できます。
Angular 4.1.0 および 2.1.0 では、Angular アニメーションにより、ngIf で遷移を実現するための改善された方法が提供されます。
Angular 4.1.0 とその後:
<code class="typescript">trigger('enterAnimation', [ transition(':enter', [ style({transform: 'translateX(100%)', opacity: 0}), animate('500ms', style({transform: 'translateX(0)', opacity: 1})) ]), transition(':leave', [ style({transform: 'translateX(0)', opacity: 1}), animate('500ms', style({transform: 'translateX(100%)', opacity: 0})) ]) ])</code>
Angular 2.1.0:
このアプローチでは、2.1.0 で導入された animate() ヘルパーを使用します。詳細については、Angular アニメーションのドキュメントを参照してください。
以上がAngular 2 で CSS トランジションを ngIf で機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。