CODEWITHSUNDEEP
javascripthtmlcssangularanimation
mr_blond
mr_blond

Reputation: 1730

How to use the animation trigger from separate .ts file in Angular?

There is an example of exporting an animation trigger in Angular:

import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s'
      }
    })
  ])
]);

But I can't figure out how do I use it in my component. There is the useAnimation() method bun no methods like useTrigger() or something like it.

How to use the animation trigger from separate .ts file in Angular?

Upvotes: 1

Views: 853

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4820

The same way you would use any other animation, as listed in the official guide. Basically you add your animation within the @Component

The only difference is that you have to import the one that was defined in different module, e.g.

import { triggerAnimation } from 'path-to-your-file-with-animations'

    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css'],
      animations: [
        triggerAnimation
      ]
    })

Upvotes: 2

Related Questions