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

Question

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

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


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

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

但是，如何使这些片段的出现和消失具有一些过渡效果？例如淡入或淡出等？

是否有可能确保在新的 htmlSegment 中完成 dom 后开始转换？ (这是为了让用户不会体验到任何闪烁或页面抖动，除了令人敬畏的淡入和淡出。)

Answer 1

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)