web-dev-qa-db-fra.com

Pouvez-vous déplacer vos animations dans un fichier externe dans Angular2?

L'annotation @Component nous fournit une propriété animations. Ceci peut être utilisé pour définir une liste de triggers, chacune avec beaucoup de propriétés state et transition.

Lorsque vous ajoutez plusieurs animations à un composant, cette liste peut devenir assez longue. De plus, certaines animations seraient vraiment sympas à utiliser dans d'autres composants. Avoir à les mettre directement dans chaque composant semble fastidieux et est répétitif - plus cela viole le principe DRY.

Vous pouvez également définir les propriétés de modèle et de style sur votre composant, mais vous avez ici la possibilité de fournir templateUrl et styleUrls à la place. Je n'arrive pas à trouver une propriété animationUrls - quelque chose me manque-t-il - y a-t-il un moyen de le faire?

angularangular2-animation
17
Per Hornshøj-Schierbeck

Sûr que vous pouvez. Vous pouvez simplement déclarer l'animation dans un fichier différent, puis l'importer où vous en avez besoin

animations.ts

export const animation = trigger(...)

composant.ts

import { animation } from './animations'

@Component({
  animations: [ animation ]
})

Ou si vous voulez le rendre configurable, vous pouvez exporter une fonction. Par exemple, jetez un coup d'œil à Combustible d'interface utilisateur . Ceci est une animation réutilisable (et configurable)

collapse.ts

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

Ensuite, dans vos composants, utilisez simplement

import { Collapse } from './collapse'

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

Bien sûr que c'est possible. Vous pouvez par exemple créer un animations.ts et le laisser exporter toutes sortes de constantes d'animation:

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'))
])

et dans votre composant, vous pouvez importer cette animation à l'aide de l'instruction import:

import {PRETTY_ANIMATION} from 'animations';

et l'appliquer à votre composant:

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

Vous et les messieurs l’avez certainement fait dans certains de ses exemples de github repo. Prenez ce qui suit:

route_animations.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%)'}))
        ])
    ]);
}

Ce qui est ensuite importé dans un composant comme suit:

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

Et ensuite appelé comme ceci sous l'animation Param lors de l'initialisation du composant:

animations: [routerAnimations('route')],

Jetez-y un coup d'œil vous-même pour en avoir une meilleure idée, mais j'espère que cela vous aidera. https://github.com/matsko/ng2eu-2016-code/blob/master

Bravo à Matsko.

1
Nige

Voici un autre exemple d'animation en fondu dans Angular 4 que j'utilise pour animer des itinéraires

// 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 }))
        ]),
    ]);

Et un composant avec la transition attachée

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

Plus de détails et une démonstration en direct sur this post

1
Jason