如何在 Angular 2 中对 ngIf 控制的元素进行动画处理？

Angular 2 ngIf 和 CSS 转换/动画

这个问题深入研究了在 ngIf 操作的元素上执行 CSS 转换或动画的挑战Angular 2 中的指令。

问题

目标是使用 CSS 为元素从右侧的入口设置动画。然而，当最初使用 ngIf 隐藏元素时，转换无法触发。

解决方案

关键问题在于 ngIf 的行为。当与 ngIf 关联的表达式变为 false 时，该元素将从 DOM 中删除。由于过渡和动画要求元素存在于 DOM 中，因此将它们应用于未渲染的元素将不起作用。

要解决此问题，建议使用 hide 而不是 ngIf 来隐藏

更新的解决方案（Angular 4.1.0 及更高版本）

在 Angular 4.1.0 及更高版本中，首选方法是使用 Angular 动画。这是使用动画的更新解决方案：

<code class="typescript">import { trigger, style, animate, transition } from '@angular/animations';

// ...

@Component({
  animations: [
    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 }))
        ])
      ]
    )
  ]
})

// ...

<div *ngIf="show" [@enterAnimation]></div></code>

此解决方案向名为“enterAnimation”的组件添加了一个触发器，并定义了进入和离开状态的转换。过渡包括变换和不透明度的样式，允许元素通过动画从右侧滑入。

请记住，此解决方案适用于 Angular 4.1.0 及更高版本。对于旧版本，使用隐藏仍然是推荐的方法。

以上是如何在 Angular 2 中对 ngIf 控制的元素进行动画处理？的详细内容。更多信息请关注PHP中文网其他相关文章！