0

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?

Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175

1 Answers1

1

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)'}))
    ])
  ]);
}
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175