Angular 4 Animationen hinzufügen Parameter

Question

Hier ist eine zufällige Animation I

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

    export const customAnimation= 
     trigger('customAnimation', [ 
      transition(':leave', [ 
       style({position: 'relative'}), 
       animate("250ms ease-in", keyframes([ 
        style({top: 0}), 
        style({top: -300}), 
       ])) 
      ]) 
     ]) 

gemacht habe ich dann in meine Komponenten am importieren. (animations: [customAnimation] ) Allerdings möchte ich die neuen Argumente Funktionen verwenden: (http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an-improved-version-for-animation-package/).

von Fall würde die -300 ein Parameter worden, und ich würde es auf mich Templatelemente rufen, indem Sie:

<div [@customAnimation]="{pixels: -300}"> 

Da will ich nicht animation() und useAnimation() verwenden, wie ich verwenden mag auf bestimmten dom-Element (nicht mit einem query() entweder) Ich habe es einfach nicht geschafft, es zu tun.

EDIT:

habe es funktioniert mit:

export const leavingTowardsTop= 
    trigger('leavingTowardsTop', [ 
     transition(':leave', [ 
      style({position: 'relative'}), 
      animate("250ms ease-in", keyframes([ 
       style({top: 0}), 
       style({top: "{{pixels}}"}) 
      ])) 
     ], {params : { pixels: "-30px" }}) 
    ]) 

einzige Problem, ich kann nicht einen anderen Wert als die Standard angeben (-30). Ich habe versucht:

[@leavingTowardsTop]="{params : { pixels: '-300px' }}" 

und

[@leavingTowardsTop]="{ pixels: '-300px' }" 

Ich habe versucht, auch nicht die Angabe ' oder px aber es dauert noch 30px

Answer 1

Dies ist die Lösung, die ich

benötigt

[@leavingTowardsTop]="{value: ':leave', params : {topPixels: '-300px'}}" 

Answer 2

Sie müssen die top Stil parametrieren wie so:

export const customAnimation= 
    trigger('customAnimation', [ 
     transition(':leave', [ 
      animate("500ms ease-in", keyframes([ 
       style({'margin-top': "-{{pixels}}px", 'height': "{{pixels}}px", 'margin-bottom': "0px"}), 
      ])) 
     ], {params : { pixels: "30" }}) 
    ]); 

Dann rufen Sie es in der Ansicht wie folgt auf:

[@customAnimation]="{value: ':leave', params: { pixels: 100)}}" 

Demo