Angular route animation

Question

export const slideInOutAnimation =
  trigger('slideInOutAnimation', [
    state('*', style({
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    })),

    transition(':enter', [
      style({
        right: '-400%',
      }),
      animate('.5s ease-in-out', style({
        position: 'relative !important' ,
        right: 0,
      })),
    ]),

    transition(':leave', [
      animate('.5s ease-in-out',
        style({
          right: '-400%',
          position: 'relative'
        }))
    ]),
  ]);

hello, this code working but the scrollbar is not visible because of the position:fixed. How can I make the position relative after the animation is finished?

I tried many animations but couldn't do it alone.

Answer 1

try using "done" event in your div and use a template reference variable (in the e.g. the "#div")

<div #div class="custom" @slideInOutAnimation *ngIf="toogle"
         (@slideInOutAnimation.done)="div.style.position='fixed'" >
  Start editing to see some magic happen :)
</div>

But your animation like (see how remove position -position is not "animated"- and how use width:100%, not left:0)

export const slideInOutAnimation =
  trigger('slideInOutAnimation', [
    state('*', style({
      top: 0,
      right: 0,
      width:'100%',
      bottom: 0,
    })),

    transition(':enter', [
      style({
        right: '-100%',
      }),
      animate('.5s ease-in-out', style({
        right: 0,
      })),
    ]),

    transition(':leave', [
      animate('.5s ease-in-out',
        style({
          right: '-100%',
        }))
    ]),
  ]);

See also you defined your "custom.css" like

.custom{
  position:absolute;
  background-color: pink;
  border:5px solid red;
  box-sizing: border-box; //<---this to force border included in size
}

See the stackblitz