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' ...

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

1 个答案: