Within my current project, I've implemented the following:
slideInOut.ts
module import { trigger, state, animate, transition, style } from '@angular/animations';
export const slideInOut = trigger('slideInOut', [
state('*', style({
transform: 'translateX(0)'
})),
// Transition for route 'enter'
transition(':enter', [
style({
transform: 'translateX(100%)'
}),
animate('.3s ease-in-out', style({
transform: 'translateX(0)'
}))
]),
// Transition for route 'leave'
transition(':leave', [
animate('.3s ease-in-out', style({
transform: 'translateX(100%)'
}))
])
]);
home.component.ts
import { Component } from '@angular/core';
import { slideInOut } from '../../animations/slideInOut';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
animations: [
slideInOut
],
styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor() {}
}
home.component.html
<div @slideInOut>
<button [routerLink]="['', { outlets: {'aux': null} }]">Test</button>
</div>
Despite the successful entry animation of my component, the exit animation fails to trigger. The component slides in correctly but does not slide out. It appears for .3s and vanishes abruptly. Various CSS properties have been tested instead of transform, with no success. Also tried substituting :leave with * => * and * => void without luck. Any suggestions? Thank you!