Czy możesz przenieść swoje animacje do zewnętrznego pliku w Angular2?

Question

Adnotacja @Component zapewnia nam właściwość animations. Można go użyć do zdefiniowania listy triggers, z których każda ma wiele właściwości: state i .

Po dodaniu wielu animacji do komponentu lista może stać się dość długa. Również niektóre animacje byłyby naprawdę przyjemne w użyciu również w innych komponentach. Konieczność umieszczania ich bezpośrednio w każdym komponencie wydaje się nużąca i jest powtarzalna - a ponadto narusza zasadę DRY.

Możesz również zdefiniować właściwości szablonu i stylów w swoim komponencie, ale tutaj masz możliwość podania templateUrl i styleUrls. Nie mogę znaleźć właściwości animationUrls - czy brakuje mi czegoś - czy jest jakiś sposób na zrobienie tego?

Answer 1

Pewnie, że możesz. Można po prostu zadeklarować animację w innym pliku, a następnie zaimportować je gdzie trzeba go

animations.ts

export const animation = trigger(...) 

component.ts

import { animation } from './animations' 

@Component({ 
    animations: [ animation ] 
}) 

Lub jeśli chcesz, aby skonfigurować , możesz wyeksportować funkcję. Na przykład spójrz na Fuel-UI Collapse. Jest wielokrotnego użytku (i konfigurowalny) Animacja

collapse.ts

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

Następnie w swoich komponentów, wystarczy użyć

import { Collapse } from './collapse' 

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

Answer 2

pewien, że to możliwe. Można zrobić na przykład animations.ts i niech eksport wszelkiego rodzaju stałych animacji:

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

aw komponentu można importować animację za pomocą instrukcji import:

import {PRETTY_ANIMATION} from 'animations'; 

i zastosować go do komponent:

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

Answer 3

Na pewno i panowie zrobili to w niektórych przykładach z repozytorium github. Weźmy następujący:

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

który następnie importowane do komponentu tak:

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

zostaje wtedy wywoływany jak to pod param animacji podczas inicjalizacji komponentu:

animations: [routerAnimations('route')], 

Spójrz na to sam, aby uzyskać lepsze pomysł, ale mam nadzieję, że to pomoże. https://github.com/matsko/ng2eu-2016-code/blob/master

Kudos na matsko.

Answer 4

Oto kolejny przykład na blaknięcie w animacji w Kątowymi 4 używam do animacji trasach

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

i składnik z przejściem dołączony

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

Więcej szczegółów i live demo na this post