route - title angular

¿Puedes mover tus animaciones a un archivo externo en Angular2?

Question

La anotación @Component nos proporciona una propiedad de animations . Esto se puede usar para definir una lista de triggers con una gran cantidad de propiedades de state y transition .

Cuando agrega múltiples animaciones a un componente, esta lista puede llegar a ser bastante larga. También sería muy bueno usar algunas animaciones en otros componentes. Tener que ponerlos directamente en cada componente parece tedioso y repetitivo, además de violar el principio DRY.

También puede definir las propiedades de plantilla y estilo en su componente, pero aquí tiene la opción de proporcionar un templateUrl y styleUrls en styleUrls lugar. Parece que no puedo encontrar una propiedad animationUrls , ¿me falta algo, hay alguna forma de hacer esto?

Answer 1

Aquí hay otro ejemplo que aparece en la animación en Angular 4 que utilizo para animar rutas.

// import the required animation functions from the angular animations module
import { trigger, state, animate, transition, style } from ''@angular/animations'';
 
export const fadeInAnimation =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger(''fadeInAnimation'', [
 
        // route ''enter'' transition
        transition('':enter'', [
 
            // css styles at start of transition
            style({ opacity: 0 }),
 
            // animation and styles at end of transition
            animate(''.3s'', style({ opacity: 1 }))
        ]),
    ]);

Y un componente con la transición adjunta.

import { Component } from ''@angular/core'';
 
// import fade in animation
import { fadeInAnimation } from ''../_animations/index'';
 
@Component({
    moduleId: module.id.toString(),
    templateUrl: ''home.component.html'',
 
    // make fade in animation available to this component
    animations: [fadeInAnimation],
 
    // attach the fade in animation to the host (root) element of this component
    host: { ''[@fadeInAnimation]'': '''' }
})
 
export class HomeComponent {
}

Más detalles y una demostración en vivo en este post.

Answer 2

Ciertamente, usted y los caballeros lo han hecho en algunos de sus ejemplos de reposiciones en github. Toma lo siguiente:

ruta_animaciones.ts

import {
    trigger,
    animate,
    style,
    transition
} from ''@angular/core'';

var startingStyles = (styles) => {
    styles[''position''] = ''fixed'';
    styles[''top''] = 0;
    styles[''left''] = 0;
    styles[''right''] = 0;
    styles[''height''] = ''100%'';
    return styles;
}

export default function(name) {
    return trigger(name, [
        transition(''void => *'', [
            style(startingStyles({
                transform: ''translateX(100%)''
            })),
            animate(''0.5s ease-out'', style({ transform: ''translateX(0%)''}))
        ]),
        transition(''* => void'', [
            style(startingStyles({
                transform: ''translateX(0%)''
            })),
            animate(''0.5s ease-in'', style({ transform: ''translateX(-100%)''}))
        ])
    ]);
}

Que luego se importa en un componente como el siguiente:

import {default as routerAnimations} from ''../route_animations'';

Y luego se llama así en la animación Param al inicializar el componente:

animations: [routerAnimations(''route'')],

Eche un vistazo a esto usted mismo para tener una mejor idea, pero espero que esto ayude. https://github.com/matsko/ng2eu-2016-code/blob/master

Felicitaciones a matsko.

Answer 3

Claro que es posible. Puede crear, por ejemplo, animations.ts y dejar que exporte todo tipo de constantes de animación:

export const PRETTY_ANIMATION = trigger(''heroState'', [
  state(''inactive'', style({
    backgroundColor: ''#eee'',
    transform: ''scale(1)''
  })),
  state(''active'',   style({
    backgroundColor: ''#cfd8dc'',
    transform: ''scale(1.1)''
  })),
  transition(''inactive => active'', animate(''100ms ease-in'')),
  transition(''active => inactive'', animate(''100ms ease-out''))
])

y en tu componente puedes importar esta animación usando la declaración de import :

import {PRETTY_ANIMATION} from ''animations'';

y aplícalo a tu componente:

@Component({
    selector : `...`
    animations : [PRETTY_ANIMATION]
})

Answer 4

Seguro que puede. Solo puede declarar la animación en un archivo diferente y luego importarla donde la necesite.

animaciones.ts

export const animation = trigger(...)

componente.ts

import { animation } from ''./animations''

@Component({
  animations: [ animation ]
})

O si desea que sea configurable, puede exportar una función. Por ejemplo, eche un vistazo al colapso de la interfaz de usuario . Esta es una animación reutilizable (y configurable).

colapso.ts

export function Collapse(duration: number = 300) {
    return trigger(''collapse'', [
           ...
        ])
}

Luego en tus componentes, solo usa

import { Collapse } from ''./collapse''

@Component({
  animations: [ Collapse(300) ],
  template: `
    <div @collapse="collapsed ? ''true'' : ''false''">
    </div>
  `
})
class MyComponent {}