angulaire 4 Animations ajouter des paramètres

Question

Voici une animation au hasard que je l'ai fait

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

Je l'importer ensuite dans mes composants. (animations: [customAnimation] ) Cependant, je voudrais utiliser les nouvelles fonctionnalités d'arguments: (http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an-improved-version-for-animation-package/).

Par exemple, le deviendrait un -300 paramètre, et je l'appellerais sur moi des éléments modèle en faisant:

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

Comme je ne veux pas utiliser animation() et useAnimation() que je veux utiliser sur un élément dom spécifique (n'utilisant pas non plus un query()) Je n'ai tout simplement pas réussi à le faire.

EDIT:

obtenu ce travail avec:

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

seule question, je ne peux pas spécifier une autre valeur que celle par défaut (-30). J'ai essayé:

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

et

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

J'ai aussi essayé de ne pas spécifier le ' ou px mais il faut encore 30px

Answer 1

est la solution Ici, je avais besoin

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

Answer 2

Vous devez paramétrer le style top comme ceci:

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

Ensuite, appelez-le dans la vue comme ceci:

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

Demo