我们如何在 Angular 中为 *ngIf 添加过渡效果？

Posted 2023-03-06

【中文标题】我们如何在 Angular 中为 *ngIf 添加过渡效果？

【英文标题】：how do we add transition effects to *ngIf in Angular?

【发布时间】：2018-04-20 14:30:11

【问题描述】：

假设你在 component.html 上有两个这样的 div

<div *ngIf="htmlSegment == 'a" >
    someMessage
</div>


<div *ngIf="htmlSegment == 'b" >
    someMessage
</div>

当您将 htmlSegment 设置为 a 或 b 时，我们知道真值段会活跃，而另一个会消失。那里没有问题。

但是，如何让这些片段的出现和消失通过一些过渡效果变得生动起来？例如淡入或淡出等？

是否可以确保在新的 htmlSegment 中完成 dom 之后开始转换？ （这样用户不会遇到任何闪烁或页面抖动，除了令人敬畏的淡入和淡出。）

【参考方案1】：

这样的事情怎么样？

span 
  opacity: 0;
  transition: opacity 1s;


.active span 
  opacity: 1;

然后在您的模板中：

<div [ngClass]="(htmlSegment=='a')?'active':'not-active'" >
    <span>someMessage</span>
</div>

<div [ngClass]="(htmlSegment=='b')?'active':'not-active'" >
    <span>someMessage</span>
</div>

【讨论】：

不透明度为 0 的元素存在于 DOM 中。所以使用 *ngIf 是不同的情况 - 元素不在 DOM 中。

@AleksGrunwald 我不明白——你想为不在 DOM 上的元素的不透明度设置动画？

是的，我们可以这样做。 Angular 动画也可以。在这里查看答案：***.com/questions/36417931/…

@AleksGrunwald 啊太棒了！

【参考方案2】：

Animate 模块不会为您的 HTML 元素设置动画，但是当 Animate 注意到某些事件（例如隐藏或显示 HTML 元素）时，该元素会获得一些可用于制作动画的预定义样式（或类）。

将动画模块添加到您的项目中：

import 
  trigger,
  state,
  style,
  animate,
  transition
 from '@angular/animations';

为你的组件添加动画属性：

animations: [
  trigger('heroState', [
    state('a', style(
     backgroundColor: 'yellow',
     opacity:0.5
    )),
    state('b', style(
     backgroundColor: 'black',
     opacity:1
    )),
    transition('a => b', animate('100ms ease-in')),
    transition('b => a', animate('100ms ease-out'))
  ])
]

当 herostate 改变时会调用触发器。

最后，您的 HTML 代码将是：

<div *ngIf="htmlSegment == 'a" 
 [@heroState]="a">
    someMessage
</div>

<div *ngIf="htmlSegment == 'b"
[@heroState]="b" >
    someMessage
</div>

我无法创建此代码的 Angular2 在线示例，但我创建了一个 AngularJS 在线示例来感知动画中究竟发生了什么。（要更改动画，您可以将 'nga-slide-down' 类更改为 'nga- fade' 或你自己的类）

Check Online(AngularJS - check auto-run js at the right panel and click on change button)