如何在 Angular 2 中使用 ngIf 进行 CSS 转换？

Angular 2 中的 ngIf 和 CSS 过渡/动画

问题：

当使用 ngIf 在 Angular 中显示 div 时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 动画文档。