CODEWITHSUNDEEP
angulartypescriptanimation
spstrademark
spstrademark

Reputation: 475

Angular app-component animations not working

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

Upvotes: 0

Views: 249

Answers (1)

Anton Marinenko
Anton Marinenko

Reputation: 2982

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;
  }
}

Upvotes: 1

Related Questions