perjansson

<ul class="grid">
	<li class="high">
		<img src="burger1.jpg">
	</li>
	<li>
		<img src="burger2.jpg">
	</li>
	<li class="wide">
		<img src="burger3.jpg">
	</li>

perjansson

const genericAnimation = [
  /* generic animation here */
]

export const routerTransition = trigger('routerTransition', [
  transition('* => *', genericAnimation)
]);

perjansson

const specificAnimation1 = [
  /* specific animation here */
]

const specificAnimation2 = [
  /* specific animation here */
]

const specificAnimation3 = [
  /* specific animation here */

perjansson

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { AppComponent } from 'app.component'
...

@NgModule({
  imports: [BrowserAnimationsModule, ...],
  declarations: [AppComponent, ...],
  bootstrap: [AppComponent]
})
export class AppModule { }

perjansson

import {
  sequence,
  trigger,
  stagger,
  animate,
  style,
  group,
  query as q,
  transition,
  keyframes,

perjansson

<main [@routerTransition]="getPageTransition(routerOutlet)">
  <router-outlet #routerOutlet="outlet"></router-outlet>
</main>

perjansson

import { routerTransition } from 'router.animations'
...

@Component({
  selector: '...',
  styleUrls: ['...'],
  templateUrl: './app.template.html',
  animations: [routerTransition],
})
export class AppComponent {