CODEWITHSUNDEEP
angularanimationtypescriptstate
Jonathan002
Jonathan002

Reputation: 10368

How to change states at the end of an animation transition? - Angular 2

Hi I'm trying to get my angular 2 app to do router transitions as shown from this tutorial.

Router Transition Tutorial

Demo Link

I'm really new to animations and am having problems with the state leaving the component styles at position: fixed allowing no scrolling. I would like to know how I can change the state to a user defined state at the end of the :entry transition.

function slideToRight() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    state('visible', style({position:'static', width:'initial'}) ),
    transition(':enter => visible', [ //<-- my attempt at switching the state
      style({transform: 'translateX(-100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})),
    ]),
    transition('visible => :leave', [ //<-- my attempt at switching the state
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
    ])
  ]);
}

Upvotes: 0

Views: 3282

Answers (1)

Arg0n
Arg0n

Reputation: 8423

Try putting the style inside the transition instead.

Example with slideToLeft function:

function slideToLeft() {
  return trigger('routerTransition', [
    transition(':enter', [
      style({transform: 'translateX(100%)', position:'fixed', width:'100%'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateX(0%)', position:'fixed', width:'100%'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ]);
}

Upvotes: 4

Related Questions