Angular 4 animation don't resumed the initial CSS value

Question

I was in Angular 2 and I change for Angular 4.0.0 rc-2 and the animations behavior is not the same. In Angular 2 I was able to resumed the initial CSS value when it returned to the state "True" but this is no longer the case with Angular 4. Somebody can help me?

State on TRUE => I want to resumed the initial CSS value

State on False => Set width to 100%

I have this animation:

trigger('flyInOutX', [
    state('true', style({transform: 'translateX(0%)'})),
    state('false', style({width: '100%', transform:'translateX(-245px)'})),
    transition('* => *', animate('300ms')),
]),

Did you try to set width: '*' on state "true"? You should know that the angular team moved the animation features from @angular/core to @angular/animations and that there a quite a few existing issues regarding animations since 4.0.0-rc.1 — cyr_x
– cyr_x, Commented Mar 5, 2017 at 22:44

Brendan · Accepted Answer · 2017-03-30 13:15:54Z

2

Animation state needs to be a string value, so using a boolean won't work.

If you were doing [@flyInOutX]="foo" in your template, try doing [@flyInOutX]="foo ? 'true' : 'false'" instead.

answered Mar 30, 2017 at 13:15

Brendan

9481 gold badge16 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FatAl Over a year ago

Better late than never! You have right, for the string value

Collectives™ on Stack Overflow

Angular 4 animation don't resumed the initial CSS value

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related