Angular animations as a separate file not in-lined

Question

I've been fiddling with Angular animations and was wondering if there's a best/recommended way to avoid inline styling ... for instance,

@Component({
selector: 'page-that-needs-anime',
templateUrl: './anime.component.html',
styleUrls: ['./anime.component.scss'],
animations: [
trigger('animeTrigger', [
state('in', style({transform: 'translateY(0)'})),
transition('void => *', [
  animate(700, keyframes([
    style({opacity: 0, transform: 'translateY(-100%)', offset: 0}),
    style({opacity: 1, transform: 'translateY(25px)',  offset: 0.3}),
    style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
  ]))
]) //you get the idea ... *Import statement is taken out for brevity

Anyway the "animations" could use a reference like styleUrls & templateUrl above? I've seen someone referred it as a const but was wondering if there was an 'Angular official' way.

have you tried including the `transition` in your `.scss`? – JorgeObregon Mar 29 '17 at 14:31 — JorgeObregon, Mar 29 '17 at 14:31

score 37 · Answer 1 · edited Jun 12 '19 at 11:44

You can keep your animations in separate files.

// animations.ts
import { trigger, state, style, transition, animate } from '@angular/animations';

export const Animations = {
    animeTrigger: trigger('animeTrigger', [
        state('in', style({transform: 'translateY(0)'})),
        transition('void => *', [
        animate(700, keyframes([
            style({opacity: 0, transform: 'translateY(-100%)', offset: 0}),
            style({opacity: 1, transform: 'translateY(25px)',  offset: 0.3}),
            style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}) 
        ]))
    ])

}

Component

import { Animations } from './animations'

@Component({
    selector: 'page-that-needs-anime',
    templateUrl: './anime.component.html',
    styleUrls: ['./anime.component.scss'],
    animations: [
        Animations.animeTrigger
    ]
})

Is it possible to import in in the app module? I tried to do it and failed. So I don't have to import it in each file I want to do the transitions. — J Agustin Barrachina, May 20 '20 at 16:29

score 2 · Answer 2 · answered Jun 22 '19 at 16:13

Taken from the documentation:

Creating reusable animations

To create a reusable animation, use the animation() method to define an animation in a separate .ts file and declare this animation definition as a const export variable. You can then import and reuse this animation in any of your app components using the useAnimation() API.
*src/app/animations.ts*

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

export const transAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}'
  }),
  animate('{{ time }}')
]);
In the above code snippet, transAnimation is made reusable by declaring it as an export variable.

Note: The height, opacity, backgroundColor, and time inputs are replaced during runtime.

You can import the reusable transAnimation variable in your component class and reuse it using the useAnimation() method as shown below.
*src/app/open-close.component.ts*

import { Component } from '@angular/core';
import { useAnimation, transition, trigger, style, animate } from '@angular/animations';
import { transAnimation } from './animations';

@Component({
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s'
          }
        })
      ])
    ])
  ],
})

Quoted from: https://angular.io/guide/reusable-animations

Angular animations as a separate file not in-lined

2 Answers2