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
.
Еще раз, это уродливое обходное решение, лучше всего использовать логическое значение.