角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