角4个动画添加参数

Question

这里是一个随机动画我做了

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

我然后将它导入到我的部件。 （animations: [customAnimation] ） 但是，我想使用新的参数功能： （http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an-improved-version-for-animation-package/）。

通过例如，-300将成为一个参数，我会做把它给我的模板元素：

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

因为我不想使用animation()和useAnimation()，因为我想用在具体的DOM元素（不使用query()）我根本没有设法做到这一点。

编辑：

得到它的工作：

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

唯一的问题，我不能指定非默认的（-30）的另一个值。我想：

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

和

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

我也试过不指定'或px，但它仍然需要30PX

Answer 1

这是我需要

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

Answer 2

您需要参数化top风格像这样：

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

然后在视图中调用它，如下所示：

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

Demo