アニメーションモジュールのバグであると思うかもしれません。Angular 2.xのアニメーションでは、高さ*からアニメーションまでのアニメーションを作成しました。固定された高さ。一方、Angular 4を使用する場合、アニメーションが適用されている要素の高さは、アニメーションが完了する前に再トリガーするとバグが発生します。ワイルドカード(*)の高さが問題を引き起こしているようです。この問題を再現できるデモスニペットは次のとおりです。あなたは要素をダブルクリックした場合、それは* -height状態にあるときにバグがトリガすることができます。Angular 4アニメーション〜高さ*
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';
}
は、私は、ワイルドカード値を使用して高さをアニメーション化する方法に何か問題がある、または間違ったInfactは何かがありますワイルドカードの高さはどのように振る舞いますか?
githubの問題を参照していただきありがとうございます。 – Tallang