我一直对Angular 4中的动画模块有些困惑,认为可能存在一个bug。在Angular 2.x中,我创建了一个动画,将元素的高度从*(任意高度)动画到固定高度。这在Angular 2中完美运行。然而,在使用Angular 4时,当重新触发动画但尚未完成时,应用动画的元素的高度会出现问题。通配符(*)高度似乎是引起问题的原因。以下是可以重现该问题的演示代码。如果在元素处于*-height状态时双击该元素,则会触发此bug:
import { Component } from '@angular/core';
import { trigger, animate, state, transition, style } from '@angular/animations';
@Component({
selector: 'app-root',
template: `
<h1 [@toggleAnimation]="isEnabled" (click)="isEnabled = isEnabled === 'active' ? 'inactive' : 'active'" style="background: blue">
{{title}}
</h1>`,
animations:
[
trigger('toggleAnimation', [
state('active', style({
height: '*',
})),
state('inactive', style({
height: '600px',
})),
transition('active <=> inactive', animate('500ms ease-in-out'))
])
]
})
export class AppComponent {
title = 'app works!';
isEnabled = 'inactive';
}
我使用通配符值来进行高度动画的方式是否有问题,还是说通配符高度本身存在问题?