Angular app-component animations not working

Question

I have developed an app using Angular8 and i want to add some animations to it however the ones i implemented are not working and not even showing some error message. For example on the i want to have a slide effect.

This is my code :

app.component.html

<body class="hold-transition sidebar-mini layout-fixed">
  <app-nav></app-nav>
  <app-aside></app-aside>
  <div class="content-wrapper ">
    <app-breadcrumb></app-breadcrumb>
    <main [@routerTransition]="getState(o)">
      <div class="card m-3">
        <div class="card-body">
          <router-outlet #o="outlet"></router-outlet>
        </div>
      </div>
    </main>
    <app-dialog> </app-dialog>
  </div>
  <app-footer></app-footer>
</body>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { routerTransition } from 'src/app/app.component.animation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [routerTransition],
})
export class AppComponent implements OnInit {
  title = 'app';
  constructor(

  ) { }
  OnInit(){}
  getState(outlet) {
    return outlet.activatedRouteData.state;
  }

}

app.component.animation

import { trigger, animate, style, group, animateChild, query, stagger, transition } from '@angular/animations';

export const routerTransition = trigger('routerTransition', [
  transition('* <=> *', [
    /* order */
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%' })
    , { optional: true }),
    /* 2 */ group([  // block executes in parallel
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])

i have also added BrowserAnimationsModule in the imports on app.module.ts

Would also want to ask how can a different animation for example fadeIn be added on the app-breadcrumb ?

Thank you for your time! Best regards

Anton Marinenko · Accepted Answer · 2020-05-19 20:04:29Z

You should pass the data to routes for activate transition. Like this:

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { state: 'home'} },
...

If you are using lazy loading, then you have to make separate file with the page router and same data structure, as in the main app. And then load components inside. Example:

import { Component } from '@angular/core';
import { routerTransition } from '../app.animation';

@Component({
  selector: 'lazy',
  template: `
  <div [@routerTransition]="getState(o)">
      <router-outlet #o="outlet"></router-outlet>
  </div>
  `,
  animations: [ routerTransition ]
})
export class LazyComponent {
  getState(outlet) {
    return outlet.activatedRouteData.state;
  }
}

Collectives™ on Stack Overflow

Angular app-component animations not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related