Angular 指令上的角度动画

TS指令文件

import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';

 @Directive({ selector: '[appDropdown]' })
 export class DropdownDirective 
{ 
@HostBinding('class.open') isOpen = false; 

@HostListener('document:click', ['$event']) toggleOpen(event: Event)
{ 
this.isOpen = this.elRef.nativeElement.contains(event.target) ? !this.isOpen : false; 
} 

constructor(private elRef: ElementRef) 
{
} 
}

HTML

<div class="row">
<div class="col-xs-12">

<div class="btn-group" appDropdown>
<button type="button" class="btn btn-primary dropdown-toggle">
Manage Recipe <span class="caret"></span>

</button>
<ul class="dropdown-menu">

<li><a (click)="onAddToShoppingList()" style="cursor: pointer;">To Shopping List</a></li>

<li><a style="cursor: pointer;" (click)="onEditRecipe()">Edit Recipe</a></li>

<li><a style="cursor: pointer;" (click)="onDeleteRecipe()">Delete Recipe</a></li>

</ul>
</div>
</div>
</div>

管理配方

到购物清单
编辑配方
删除配方

我尝试将淡入动画。 当你点击下拉列表时，它会使下拉列表中的所有内容一个接一个地出现，即淡入效果。

---

我开始怀疑是否有可能

你能提供一个stackblitz吗？我只是刚开始编码这是我的github：很抱歉