如何在 Angular 2 中使用 ngIf 进行 CSS 转换？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-10-31 21:17:29

原创

1097 人浏览过

How to Make CSS Transitions Work with ngIf in Angular 2?

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

问题：

当使用 ngIf 在 Angular 中显示 div 时2、如果元素最初是隐藏的，为什么 CSS 过渡不起作用？

答案：

ngIf 在条件变为 false 时从 DOM 中删除该元素。但是，过渡不能应用于不存在的元素。

解决方案：

为了平滑过渡，请使用 [hidden] 而不是 [ngIf]：

<code class="typescript"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show"></code>

登录后复制

这样，元素保留在 DOM 中，并且当其显示属性更改时可以应用转换。

使用 Angular 动画更新解决方案

在 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 中使用 ngIf 进行 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！