0

I have the same animation triggers in most of my components.

Is there a way to import a set of triggers only once for the entire app globally or for specific feature-modules?

export const FADE_ANIMATION = [
    trigger('fade', [
        transition(':enter', [style({ opacity: 0 }), animate(200)]),
        transition(':leave', animate(200, style({ opacity: 0 }))),
    ]),
    trigger('fadeIn', [transition(':enter', [style({ opacity: 0 }), animate(200)])]),
    trigger('fadeInListItem', [transition(':enter', [style({ opacity: 0 }), animate(100)])]),
    trigger('fadeInList', [transition(':enter', [query('@fadeInListItem', stagger(50, animateChild()), { optional: true })])]),
];


@Component({
    selector: 'some-app-cmp',
    templateUrl: './some-app-cmp.component.html',
    styleUrls: ['./some-app-cmp.component.css'],
    animations: [...FADE_ANIMATION],
})

The official docs only tell that you can import predefined animations like i'm already doing.

Han Che
  • 8,239
  • 19
  • 70
  • 116

1 Answers1

0

I think there is no way to do it. I thought its possible via APP_BOOTSTRAP_LISTENER ( since it calls for every component that is created ) but no success so far.

enno.void
  • 6,242
  • 4
  • 25
  • 42