0

I recently installed the latest version of Angular and created a new project. Imported animations, everything works fine. As I try to use two trigger() functions, the second one will not work. If I comment out the first one, the second will work. I tried this with more that one animations, it drives me nuts. It is as if there is a conflict between the two or with the version on Angular I'm using, nevertheless there are no errors. Here is a sample of an animations from a youtube tutorial: First the 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>

Now, the animation from the main .ts file:

@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)'}))
    ]))

  ])
])


]
})

I would really appreciate some help, as I searched as much as I could for a solution and could not find an answer. Some info about the versions installed:

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
Lex
  • 6,758
  • 2
  • 27
  • 42
Mihai Sturza
  • 1
  • I don't think you can `query(':enter')` or `query(':leave')`. The query function is used to select a child DOM element. The keywords `:enter` and `:leave` are aliases for state changes. – Reactgular Jun 06 '18 at 00:13
  • I take that back. The docs say you can query for new or removed elements. – Reactgular Jun 06 '18 at 00:15
  • I sort it out, somehow. In the html file,
    nested the
    . As I separated the divs, multiple trigger worked just fine. I'm still not very sure why it was not working before, though, but I'm getting closer.
     – Mihai Sturza Jun 06 '18 at 06:07

1 Answers1

0

You could try adding style="display: block" to the element:

... id='container' style="display: block" [@listAnimations]='items.length' ...
Gautam
  • 2,597
  • 1
  • 28
  • 51
yx zhu
  • 1