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

Question

假设你在component.html有两个这样的裂口

<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在线示例，但我创建了一个Angular JS在线示例，用于感知动画中发生的具体情况。（要更改动画，您可以将“nga slide down”类更改为“nga fade”或您自己的类）

在线检查（AngularJS-检查右侧面板上的自动运行js并单击更改按钮）