Wie erstellt man wiederverwendbare Animationen in Angular 2

Question

Ich spiele mit der Animation API, und ich würde gerne eine wiederverwendbare Animation wie sagen schieben Inhalt für Top-Level-Router Ansichten erstellen. Ich schaffte es, durch die funkige Metadaten-Syntax zu kommen (was ziemlich cool ist, wenn man die verrückte Idee, Metadaten zu verwenden, hinter sich gelassen hat), um die Animationen größtenteils zum Laufen zu bringen.

@Component({ 
     //moduleId: module.id, 
     selector: 'album-display', 
     templateUrl: './albumDisplay.html', 
     animations: [ 
     trigger('slideIn', [ 
      state('*', style({ 
      transform: 'translateX(100%)', 
      })), 
      state('in', style({ 
      transform: 'translateX(0)', 
      })), 
      state('out', style({ 
      transform: 'translateX(-100%)', 
      })), 
      transition('* => in', animate('600ms ease-in')), 
      transition('in => out', animate('600ms ease-in')) 
     ]) 
     ] 
    }) 
    export class AlbumDisplay implements OnInit { 
     slideInState = 'in'; 
     ... 
    } 

Und dann das mein Top-Level-Element in der Komponente zuweisen:

<div class="container" [@slideIn]="slideInState"> 

Also das funktioniert, aber wie kann ich diese wiederverwendbar zu machen? Ich möchte diese Metadaten nicht auf jede Ansicht kleben. Da dies Metadaten sind, bin ich mir nicht sicher, wie Sie das wiederverwendbar machen könnten.

Answer 1

Eine Möglichkeit besteht darin, den Animations-Trigger-Code in eine separate Datei zu setzen und als const Variable zu exportieren und in der Komponente wie unten zu verwenden.

animations.ts

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

export const slideIn = trigger('slideIn', [ 
    state('*', style({ 
    transform: 'translateX(100%)', 
    })), 
    state('in', style({ 
    transform: 'translateX(0)', 
    })), 
    state('out', style({ 
    transform: 'translateX(-100%)', 
    })), 
    transition('* => in', animate('600ms ease-in')), 
    transition('in => out', animate('600ms ease-in')) 
]); 

Album-display.component.ts

import { slideIn } from './animations'; // path to your animations.ts file 

@Component({ 
    //moduleId: module.id, 
    selector: 'album-display', 
    templateUrl: './albumDisplay.html', 
    animations: [ 
     slideIn 
    ] 
}) 
export class AlbumDisplay implements OnInit { 
    slideInState = 'in'; 
    ... 
} 

Answer 2

Die richtige Lösung wäre, Animationen in den Richtlinien unterstützt zu haben.

Es ist nicht der Fall, aber es ist ein Problem für die auf Angular der Github: https://github.com/angular/angular/issues/9947

Hoffnung wird es bald gelöst werden.

Answer 3

Mit einer Klasse und Sie können erweitert,

import { trigger, style, state, animate, transition, AnimationMetadata } from "@angular/core"; 
export class MyAwesomeAnimations { 

    /** 
    * 
    * @param nameTrigger Name of triggers 
    * @param setNewsStates add states for animations 
    * @param setNewTransitions add transitions for states 
    */ 
    SetTrigger(nameTrigger: string, setNewsStates?: AnimationMetadata[], setNewTransitions?: AnimationMetadata[]): any { 
     let metaData: AnimationMetadata[] = [ 
      state('*', style({ 
       transform: 'translateX(100%)', 
      })), 
      state('in', style({ 
       transform: 'translateX(0)', 
      })), 
      state('out', style({ 
       transform: 'translateX(-100%)', 
      })), 
      transition('* => in', animate('600ms ease-in')), 
      transition('in => out', animate('600ms ease-in')) 
     ]; 
     if (setNewsStates) 
      metaData.concat(setNewsStates); 
     if (setNewTransitions) 
      metaData.concat(setNewTransitions); 


     return trigger(nameTrigger, metaData); 
    } 
} 

Für den Einsatz

@Component({ 
     selector: "orden-detail-component", 
     animations: [new MyAwesomeAnimations().SetTrigger("slideIn")], 
     template:"<div class="container" [@slideIn]="slideInState">" 
    }) 
    export class OrdenDetailComponent { 
     slideInState = 'in'; 
    } 

Ich hoffe, auf diese Weise kann Ihnen helfen,

Answer 4

Router Beispiel einer Animation in Angular 4

Ich bin gerade damit fertig geworden, Router-Animationen anzugehen Elf mit Angular 4, hier sind ein paar Beispielanimationen, die ich für einen Einblendeübergang und einen Ein-/Ausblendübergang entwickelt habe.

Check out this post für weitere Details und eine Live-Demo.

Angular 4 Folie in/out-Animation

// import the required animation functions from the angular animations module 
import { trigger, state, animate, transition, style } from '@angular/animations'; 
  
export const slideInOutAnimation = 
    // trigger name for attaching this animation to an element using the [@triggerName] syntax 
    trigger('slideInOutAnimation', [ 
  
        // end state styles for route container (host) 
        state('*', style({ 
            // the view covers the whole screen with a semi tranparent background 
            position: 'fixed', 
            top: 0, 
            left: 0, 
            right: 0, 
            bottom: 0, 
            backgroundColor: 'rgba(0, 0, 0, 0.8)' 
        })), 
  
        // route 'enter' transition 
        transition(':enter', [ 
  
            // styles at start of transition 
            style({ 
                // start with the content positioned off the right of the screen, 
                // -400% is required instead of -100% because the negative position adds to the width of the element 
                right: '-400%', 
  
                // start with background opacity set to 0 (invisible) 
                backgroundColor: 'rgba(0, 0, 0, 0)' 
            }), 
  
            // animation and styles at end of transition 
            animate('.5s ease-in-out', style({ 
                // transition the right position to 0 which slides the content into view 
                right: 0, 
  
                // transition the background opacity to 0.8 to fade it in 
                backgroundColor: 'rgba(0, 0, 0, 0.8)' 
            })) 
        ]), 
  
        // route 'leave' transition 
        transition(':leave', [ 
            // animation and styles at end of transition 
            animate('.5s ease-in-out', style({ 
                // transition the right position to -400% which slides the content out of view 
                right: '-400%', 
  
                // transition the background opacity to 0 to fade it out 
                backgroundColor: 'rgba(0, 0, 0, 0)' 
            })) 
        ]) 
    ]); 

Angular 4 Fade in Animation

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

Komponente mit Übergang angebracht

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

Answer 5

Vielleicht ist es ein bisschen spät, aber ich würde immer noch gerne eine Antwort für eine dynamischere Version des Auslösers setzen.

Setzen Sie den Animations-Trigger-Code in eine separate Datei und exportieren Sie ihn als function.

translate.ts

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

export function TranslateX(name: string, x: string, duration: number): AnimationEntryMetadata { 
    return trigger(name, [ 
      state('false', style({ transform: 'translateX(0)' })), 
      state('true', style({ transform: 'translateX(' + x + ')' })), 
      transition('0 => 1', animate(duration + 'ms ease-in')), 
      transition('1 => 0', animate(duration + 'ms ease-out')), 
     ]); 
} 

so in der Komponente app.component.ts

import { TranslateX } from './translate'; 

@Component({ 
    ... 
    templateUrl: './app.component.html', 
    animations: [ 
        TranslateX('trigger1Title','-100%', 200), 
        TranslateX('trigger2Title','20vw', 700) 
        ] 
    ... 
}) 

und in Vorlage app.component.html

... 
<div [@trigger1Title]="token1"> ... </div> 
<div [@trigger2Title]="token2"> ... </div> 
... 

Sie können den Trigger mit mehr Eingabedaten anpassen, z. B. die Übergangszeiten trennen und so weiter.