Angular - animate using transform but don't apply position absolute when the animation is finished

Question

So I'm trying to apply some slick animations and they work kinda great but not so much since they break layout a lot.

The problem is that I need to use position: absolute when animating so that I can use transform, as seen here:

export function SlideLeft() {

  return trigger('slideLeft', [
    state('void', style({position: 'absolute', width: '100%', transform: 'translate3d(100%, 0, 0)'}) ),
    state('*', style({position: 'absolute', width: '100%', transform: 'translate3d(0, 0, 0)'}) ),
    transition(':enter', [
      style({transform: 'translate3d(100%, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(0, 0, 0)'}))
    ]),
    transition(':leave', [
      style({transform: 'translate3d(0, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(100%, 0, 0)'}))
    ])
  ]);
}

Usage:

@Component({
  animation: [SlideLeft()]
})

export class SomeComponent {

  @HostBinding('@slideLeft') value = '';
}

Although this works, it breaks element heights when the animation is done, since the component is no longer part of the page flow.

Instead what I would like to do is animate like above, but when the animation is done I'd like to remove the position: absolute bit.

I thought I could achieve this by just removing position: absolute from the void and * style object, but that just causes the animation to break completely.

Is it possible to achieve what I want and how would I go about it if it is?

score 1 · Accepted Answer · answered May 22 '17 at 12:55

This will work, it'll only animate absolute position but won't leave it on the element:

export function SlideLeft() {

  return trigger('slideLeft', [
    state('*', style({position: relative, width: '100%'}) ),
    transition(':enter', [
      style({position: 'absolute', transform: 'translate3d(100%, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(0, 0, 0)'}))
    ]),
    transition(':leave', [
      style({position: 'absolute', transform: 'translate3d(0, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(100%, 0, 0)'}))
    ])
  ]);
}

Angular - animate using transform but don't apply position absolute when the animation is finished

1 Answers1