如何在 Angular 2 中使用 ngIf 進行 CSS 轉換？

Angular 2 中的ngIf 和CSS 過渡/動畫

問題：

當使用ngIfular 在使用時2.如果元素最初是隱藏的，為什麼CSS 過渡不起作用？

答案：

ngIf 在條件變成 false 時從 DOM 中刪除該元素。但是，過渡不能應用於不存在的元素。

解：

為了平滑過渡，請使用[hidden] 而不是[ngIf]：

<code class="typescript"><div class="note">
<p>這樣，元素保留在DOM 中，並且當其顯示屬性變更時可以套用轉換。 </p>
<h2 id="使用-Angular-動畫更新解決方案">使用 Angular 動畫更新解決方案</h2>
<p>在 Angular 4.1.0 和 2.1 中.0，Angular 動畫提供了一種改進的方法來使用 ngIf 實現過渡。 </p>
<p><strong>Angular 4.1.0 以上版本：</strong></p>
<pre class="brush:php;toolbar:false"><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 動畫文檔。