Angular 2 Анимация - логический триггер?

Я пытаюсь вызвать переход, связанный с логическим свойством, но это, похоже, не срабатывает.

Вот вырезанная версия триггера анимации

trigger(
  'trueFalseAnimation', [
    transition('* => true', [
      style({backgroundColor: '#00f7ad'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ]),
    transition('* => false', [
      style({backgroundColor: '#ff0000'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ])
  ]
)

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div>

Чтобы проверить:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = true;
        setTimeOut(() => {
            this.model.someProperty = false;
        }, 5000);    
    }, 1000)
}

Триггер никогда не происходит, когда изменяется someProperty.

В качестве быстрого теста я сменил триггер на использование строки, и он работает

trigger(
      'trueFalseAnimation', [
        transition('* => Success', [
          style({backgroundColor: '#00f7ad'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ]),
        transition('* => Failed', [
          style({backgroundColor: '#ff0000'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ])
      ]
    )

Чтобы проверить:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = "Success";
        setTimeOut(() => {
            this.model.someProperty = "Failed";
        }, 5000);    
    }, 1000)
}

Второй пример работает просто отлично

Мои вопросы

Булевы поддерживаются как триггеры?
Если да на # 1, что я делать неправильно?

Ответ 1

Кажется, нет. Я видел, что проблема (12337) уже поднята для этого, но до сих пор не было обновлений.
Другой альтернативой является использование 1 и 0 вместо true и false.

Смотрите plunker от здесь.

trigger('isVisibleChanged', [
      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
])

Ответ 2

У меня такая же проблема. Не уверен, что boolean поддерживается как триггеры, но обходной путь, который я нашел, заключался в том, чтобы определить свойство string с помощью getter, чтобы вернуть логическое значение в виде строки. Что-то вроде этого:

get somePropertyStr():string {
    return this.someProperty.toString();
}

Затем вы должны привязать свою анимацию к этому свойству somePropertyStr.

Еще раз, это уродливое обходное решение, лучше всего использовать логическое значение.