Как использовать входные параметры в угловой анимации 6?

Question

В этой анимации я пытаюсь уменьшить ширину от 100% до динамической начальной ширины "toolWidth" (в процентах). Переменная "toolWidth" может быть установлена ​​пользователем в приложении.

Анимация:

trigger('testAnimation', [
    state('opened', style({
      'width': '100%'
    })),
    state('*', style({
      'width': '{{toolWidth}}%'
    }), {params: {toolWidth: 30}}),
    transition('* => opened', animate('600ms ease-in')),
    transition('opened => *', animate('600ms ease-out'))
  ])

Шаблон:

<div [@testAnimation]="{value: state, params: {toolWidth: newToolWidth}}"></div>

Проблема:

Если переменная "состояние" изменяется на "закрыт", ничего не происходит. Кажется, что анимация не запускается с новым состоянием "открыто". Начальное значение "состояние" "открыто". Переменная "newToolWidth" устанавливается пользователем. Если я не использую параметры, это работает очень хорошо.

Я что-то пропустил?

Answer 1

Для других, проходящих мимо этого вопроса... Вот как я делаю многоразовые анимации в Angular 7. Это может также относиться к Angular 6:

демонстрация стекаблиц здесь

animations.ts

Создайте анимацию в отдельном файле, например animations.ts. Обратите внимание на строки "params". Это просто значения по умолчанию, которые могут быть изменены во время выполнения:

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

export const slidingDoorAnimation = trigger('slidingDoorAnimation', 
  [
    state('in', 
      style({ width: '{{ inWidth }}', overflow:'hidden'}),
      { params: { inWidth: '250px'}}
    ),
    state('out', 
      style({ width: '{{ outWidth }}'}),
      { params: { outWidth: '*'}}
    ),
    transition('* <=> *',animate('{{ time }}'))
  ]
);

app.component.ts

Теперь вы можете использовать эту анимацию в любом компоненте, просто импортировав ее из файла анимации:

import { Component } from '@angular/core';
import { slidingDoorAnimation } from './animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [slidingDoorAnimation]
})
export class AppComponent  {
  name = 'Angular';
  public slidingDoorValue:string = 'out';

  toggleSlideContent() {
    this.slidingDoorValue = (this.slidingDoorValue == 'in')?'out':'in'; 
  }
}

app.component.html

В html-файле свяжите параметры с переменными общедоступного компонента. Переменная slideDoorValue устанавливается в "in" или "out" в соответствии с состояниями, определенными в анимации. Параметры для стилей являются необязательными, поскольку они имеют значения по умолчанию, определенные в анимации.

<div [@slidingDoorAnimation]="{value:slidingDoorValue,params:{inWidth:'100px',time:'1000ms'}}">Hello world</div>

Answer 2

Анимация:

trigger('openClose', [
  // ...
  state('open', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "yellow"}}),
  state('closed', style({

    backgroundColor: "{{newColor}}"
  }),{params:{ newColor: "red"}}),
  transition('open => closed', [
    animate('0.5s')
  ]),
  transition('closed => open', [
    animate('0.5s')
  ]),
]),

сценарий:

ngOnInit() {
    setInterval(() => {
      this.toggle();
    }, 2000);
  }

  dynoColor:string="rgb(0,0,0)";
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
    let cRed = this.getRandom();
    let cGreen = this.getRandom();
    let cBlue = this.getRandom();
    this.dynoColor = "rgb("+cRed + ", " + cGreen + ", " + cBlue+")";
  }

  getRandom() {
    var x = Math.floor((Math.random() * 255) + 0);
    return x;
  }

Шаблон:

<div [style.width.px]='100px' [style.height.px]='100px' [@openClose]="{value: (isOpen ? 'open' : 'closed'), params: {newColor: dynoColor}}" >

В моем случае я случайно менял цвет фона, и он работает отлично.

Я использовал угловую версию 5.2.10