有时候，我们需要在显示动画的同时，对DOM添加或移除元素。下面，我们来看看如何通过对一个列表添加或删除条目，以实现淡入和淡出的动画效果。
请将如下代码插入AnimationdemoComponent类的定义之中。
listItem = []; list_order: number = 1; addItem() { var listitem = "ListItem " + this.list_order; this.list_order++; this.listItem.push(listitem); } removeItem() { this.listItem.length -= 1; }
请在该动画的属性中添加如下的触发器定义。
trigger('fadeInOut', [ state('void', style({ opacity: 0 })), transition('void <=> *', animate(1000)), ]),
在此，我们定义了触发器fadeInOut。当该元素被添加到DOM时，它的状态就从void转换为wildcard，我们表示为void => *。而当该元素从DOM删除时，它的状态就从wildcard转换为void，我们表示为* => void。
我们给动画的不同方向使用相同的动画定时，其语法为<=>。正如该触发器所定义的，动画从void => * 和 * => void，都需要1000毫秒才能完成。
请在app.component.html文件中添加如下HTML代码。
<h3>Fade-In and Fade-Out animation</h3> <button (click)="addItem()">Add List</button> <button (click)="removeItem()">Remove List</button> <div> <ul> <li *ngFor="let list of listItem" [@fadeInOut]> {{list}} </li> </ul> </div>
在此，我们定义了两个按钮来添加和删除条目。我们将fadeInOut触发器与元素绑定，以实现在对DOM进行添加、删除时，能够出现淡入和淡出的效果。
下图便是该动画在浏览器中的运行效果：
进入和离开动画
此外，我们还能够通过对DOM的添加，实现某个元素从左边进入屏幕;而在删除时，能让该元素从右边离开屏幕。
由于从void => * 和 * => void 的转换十分常见。因此，Angular为这些动画提供了别名机制：
对于 void => * ，我们可以用':enter'
对于 * => void ，我们可以用':leave'
这两个别名使得此类转换更具可读性，也更容易被理解。
请在动画的属性中添加如下触发器的定义。
trigger('EnterLeave', [ state('flyIn', style({ transform: 'translateX(0)' })), transition(':enter', [ style({ transform: 'translateX(-100%)' }), animate('0.5s 300ms ease-in') ]), transition(':leave', [ animate('0.3s ease-out', style({ transform: 'translateX(100%)' })) ]) ])
在此，我们定义了触发器EnterLeave。那么':enter'的转换需要等待300毫秒，然后运行0.5秒，并实现滑入的效果;而':leave'的转换只运行0.3秒，实现滑出的效果。
请在app.component.html文件中添加如下HTML代码。
<h3>Enter and Leave animation</h3> <button (click)="addItem()">Add List</button> <button (click)="removeItem()">Remove List</button> <div> <ul> <li *ngFor="let list of listItem" [@EnterLeave]="'flyIn'"> {{list}} </li> </ul> </div>
在此，我们定义了两个按钮来对列表添加和删除条目。我们将EnterLeave触发器与元素绑定，以实现在对DOM进行添加、删除时，出现滑入和滑出的效果。
下图便是该动画在浏览器中的运行效果：
结论
综上所述，我们针对Angular 6的动画效果，探讨了动画状态和转换的概念，也通过一个应用示例展示了实际的动画代码与效果。
推荐：
感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】，更多网页制作特效源码及学习干货哦！！！
以上所述是小编给大家介绍的使用Angular 6创建各种动画效果的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: