角度动画 - 2 个触发功能将不起作用

Question

我最近安装了最新版本的Angular并创建了一个新项目。导入的动画，一切正常。当我尝试使用两个 trigger(( 函数时，第二个将不起作用。如果我注释掉第一个，第二个将起作用。我尝试了不止一个动画，它让我发疯。就好像两者之间或与我正在使用的 Angular 版本之间存在冲突，但是没有错误。 以下是YouTube教程中的动画示例： 首先是 HTML：

<div id='container' [@listAnimations]='items.length'> 
<button (click)='pushItem()'>Add item</button>
<button (click)='removeItem()'>Remove item</button>
<div id='list' *ngFor='let item of items'>{{item}}</div>
<div [@explainerAnim]>
<div class='col'>
<p>Greek Extra Virgin Oil for long and healthy life</p>
</div>
<div class='col'>
<p>Greek Extra Virgin Oil for long and healthy life</p>
</div>
<div class='col'>
<p>Greek Extra Virgin Oil for long and healthy life</p>
</div>
</div>
</div> 

现在，来自主 .ts 文件的动画：

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('listAnimations', [
transition('* => *', [
query(':enter', style({opacity: 0}), {optional: true}),
query(':enter', stagger('300ms', [
animate('1s ease-in', keyframes([
style({opacity:0, transform: 'translateY(-75px)', offset: 0}),
style({opacity:.5, transform: 'translateY(35px)', offset: .3}),
style({opacity:1, transform: 'translateY(0px)', offset: 1}),
]))
]), {optional: true}),
query(':leave', stagger('300ms', [
animate('1s ease-in', keyframes([
style({opacity:1, transform: 'translateY(0)', offset: 0}),
style({opacity:.5, transform: 'translateY(35px)', offset: .3}),
style({opacity:0, transform: 'translateY(-75px)', offset: 1}),
]))
]), {optional: true})
])
]),
trigger('explainerAnim', [
transition('* => *', [
query('.col', style({opacity:0, transform: 'translateX(-45px)'})),
query('.col', stagger('500ms', [
animate('800ms 1.2s ease-out', style({opacity:1, transform: 'translateX(0)'}))
]))
])
])

]
})

我真的很感激一些帮助，因为我尽可能多地寻找解决方案，但找不到答案。有关已安装版本的一些信息：

Angular CLI: 6.0.7
Node: 8.10.0
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.7
@angular-devkit/build-angular     0.6.7
@angular-devkit/build-optimizer   0.6.7
@angular-devkit/core              0.6.7
@angular-devkit/schematics        0.6.7
@angular/cli                      6.0.7
@ngtools/webpack                  6.0.7
@schematics/angular               0.6.7
@schematics/update                0.6.7
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Answer 1

您可以尝试向元素添加style="display: block"：

... id='container' style="display: block" [@listAnimations]='items.length' ...