CODEWITHSUNDEEP
angularanimation
VanAlbert
VanAlbert

Reputation: 2469

Angular 4 animation transition unexpected behavior

Using Angular 4.3 and the Angular 4.3 Animations package, it appears that the last transition in a multiple-transition animation doesn't fire. Here is the Plunker:

https://plnkr.co/edit/F3tHn7?p=preview

In all the demos and courseware I've seen, the div should return to the initial state, but it does not. Here's the code:

HTML: 

<div (click)="changeMe = 'active'"
     [@changeState]="changeMe">Click me</div>

Component:

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import {BrowserModule} from '@angular/platform-browser'
import 'web-animations-js';

import {
    trigger,
    state,
    style,
    animate,
    transition
} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.html',
  animations: [
    trigger('changeState', [
      state('inactive', style({
        backgroundColor: 'green',
        width: '100px',
        height: '100px'
      })),
      state('active', style({
        backgroundColor: 'magenta',
        width: '100px',
        height: '50px'
      })),
      transition('inactive => active', animate('1000ms')),
      transition('active => inactive', animate('1000ms'))
    ])
  ]
})
export class App {
changeMe = 'inactive';
}

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

This reflects the Angular.IO documentation which says:

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

It's also lifted basically verbatim from well-documented courseware in which I saw it work with Angular 4.0. I checked the release notes and there are not supposed to have been any functionality changes in the 4.3 animations package. I am using @angular/cli. If I'm missing anything, I'd appreciate a pointer, and if there is some change in animations syntax in 4.3 it'd be great if someone could point me to where it's documented.

Thanks for any help...

EDIT: I'm upvoting Vega's answer it made it clear that an Angular-external delay was required to return to the initial state. My misunderstanding was in thinking Angular transitions are executed sequentially. Here is the updated Plunker with the working example straight from the courseware in question. I misunderstood the thing, my bad.

https://plnkr.co/edit/kkTccN?p=preview

Upvotes: 1

Views: 433

Answers (1)

Vega
Vega

Reputation: 28738

changMe value is stuck to 'active' value after a click. Change it like this:

<div (click)="change()"
 [@changeState]="changeMe">Click me</div>

and 

change(){

  setTimeout(()=>{    
     this.changeMe = this.changeMe== 'active' ? 'inactive' : 'active'
  },1000);
  setTimeout(()=>{    
     this.changeMe = this.changeMe== 'active' ? 'inactive' : 'active'
  },3000);
}

Hope this helps

Upvotes: 2

Related Questions