如何通过 Angular 2 的 ngIf 指令使用 CSS 转换和动画？

Angular 2 ngIf 和 CSS 转换/动画

Angular 2 的 ngIf 指令通常用于根据给定表达式有条件地渲染元素。但是，在这些元素上使用 CSS 过渡或动画时，可能会出现意外行为。

请考虑以下代码片段：

// ...
<div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
// ...

在此示例中，目标是让 div 元素当 show 设置为 true 时，使用 CSS 从右侧滑入。 *ngIf 指令确保仅当 show 为 true 时才渲染元素，但当 show 为 false 时，该元素会从 DOM 中完全删除。

出现此问题是因为 CSS 动画或过渡要求目标元素在动画持续期间出现在 DOM 中。由于 *ngIf 在 show 为 false 时删除元素，因此 CSS 中定义的任何过渡都不会生效。

解决方案：

要解决此问题，建议使用 [hidden] 属性而不是 ngIf 来隐藏应该动画的元素。

// ...
<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">
  <p> Notes</p>
</div>
// ...

通过使用 [hidden]，该元素仍然存在于 DOM 中，但其可见性设置为“隐藏”当显示为假时。这确保了该元素可用于要应用的 CSS 动画或过渡。

以上是如何通过 Angular 2 的 ngIf 指令使用 CSS 转换和动画？的详细内容。更多信息请关注PHP中文网其他相关文章！