параметров в анимации Angular2

Question

Я пытаюсь сделать простую анимацию, как простой JQuery ниже

animate({'left' : left_indent}) 

Я использую Angular2 анимация, но проблема в том, как я могу передать left_indent параметр вне моего компонента Класс в триггер анимации?

animations: [ 
    trigger('flyInOut', [ 

     state('for', style({ 
      left: this.left_indent, 
     })), 

     transition('* => for', [ 
      animate(2000, keyframes([ 
       style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }), 
      ])) 
     ]), 
    ]) 
] 

Answer 1

Теперь это возможно.

animations: [ 
    trigger('flyInOut', [ 

     state('for', style({ 
      left: '{{left_indent}}', // use interpolation 
     }), {params: {left_indent: 0}}), // default parameters values required 

     transition('* => for', [ 
      animate(2000, keyframes([ 
       style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }), 
      ])) 
     ]), 
    ]) 
] 

UPDATE (в соответствии с SplitterAlex ответа):

в шаблоне (для угловых < 4.4.6):

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div> 

для Угловое> = 4.4.6 шаблон должен быть

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div> 

Answer 2

В настоящее время анимации допускают только статические определения значений.

Однако в соответствии с этим git hub feature request, выпущенным в июне 2016 года, есть план, но он по-прежнему остается на отставании функций для добавления.

Он еще не выпущен.

Answer 3

У меня есть одно решение. Но это полезно, только если вы пытаетесь использовать одну и ту же анимацию несколько раз с разными параметрами, которые вы уже знаете.

Например, у меня есть многоразовая анимация для создания эффекта SlideUp-slideDown. И в сжатом контейнере состояния должна сохраняться некоторая высота (которую я уже знаю для этих контейнеров).

Анимация:

import { style, trigger, state, transition, animate } from "@angular/animations"; 

export const slideUpDownAnimation = (height) => { 
    return trigger(`slideUpDownAnimation${height}`, [ 
     state('0', style({ 
      overflow: 'hidden', 
      height: '*' 
     })), 
     state('1', style({ 
      overflow: 'hidden', 
      height: `${height}px` 
     })), 
     transition('1 => 0', animate('400ms ease-in-out')), 
     transition('0 => 1', animate('400ms ease-in-out')) 
    ]); 
}; 

В классе компонента:

import { slideUpDownAnimation } from "../../animations/slide-up-down.animation"; 

@Component({ 
    moduleId: module.id, 
    selector: 'new-order', 
    templateUrl: './new-order.component.html', 
    animations: [ 
     slideUpDownAnimation(32), // will return trigger named "slideUpDownAnimation32" 
     slideUpDownAnimation(60) // will return trigger named "slideUpDownAnimation60" 
    ] 
}) 
export class NewOrderComponent {... 

И, наконец, в HTML компонента:

<div class="header-fields" 
     [@slideUpDownAnimation32]="collapsedFields"> 
... 

<div class="line-group" 
      *ngFor="let group of lineGroups; let g = index" 
      [@slideUpDownAnimation60]="group.collapsed"> 
... 

К сожалению, он не может быть использован для динамических параметров Потому что вы должны определить их в декоратор & HTML.

Answer 4

Принятый ответ не является wo rk для меня с Angular 4.4.6

Вы должны обернуть значения из параметров в шаблоне в объекте params

Заменить:

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div> 

С:

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>