：leave遷移で要素をアニメーション化しようとしていますが、その動作に少し戸惑っています。
trigger('inOut', [
transition(':enter', [
style({'max-height': '0'}),
animate(250, style({'max-height': '150px'}))
], { params: { maxHeight: '150px'}}),
したがって、アニメーション化されている要素の最大高さは、アニメーションの最終フレームで15pxに設定されていると思いますが、そのままにしておきます。max-heightがアニメーション化されているのがわかりますが、最後に削除され、要素はコンテンツに合う高さにスケーリングされます。これがどのように役立つか想像するのに苦労していますが、私は何か間違ったことをしていますか？
更新-これで解決しました
trigger('inOut', [
state('void', style({'max-height': '0'})),
state('*', style({'max-height': '{{maxHeight}}'}), { params: { maxHeight: '0px'}}),
transition(':enter', animate(300)),
transition(':leave', animate(250))
]),
これを解決する方法stateは、アニメーションの終わりにaを使用し、(@animation.done)この状態をトリガーすることです。
app.component.html
<div [@routeAnimations]="state" (@routeAnimations.done)="onDone($event)" class="animate-div">
</div>
app.component.ts
import { trigger, style, state, animate, transition } from '@angular/animations';
@Component({
animations: [
trigger('routeAnimations', [
state('done', style({
maxHeight: '150px'
})),
transition(':enter', [
style({ 'max-height': '0' }),
animate(1000, style({ 'max-height': '150px' }))
], { params: { maxHeight: '150px' } })
])
]
})
export class AppComponent {
state = '';
onDone(event) {
this.state = 'done';
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加