3
折りたたみ可能なコンポーネントを作成しています。これをクリックするとロールアップ/ズームダウンして詳細を表示/非表示できます。コンポーネントは次のとおりです。Angular2 Animations ::イージングが期待通りに機能しない
// component.ts
import {Component, Directive, Input} from '@angular/core';
import {trigger, state, style, transition, animate} from '@angular/core'
@Component({
selector: 'expandable',
template: '<div *ngIf="isExpanded" @animate="'slide'"><ng-content></ng-content></div>',
animations: [
trigger('animate', [
state('slide', style({ overflow: 'hidden', height: '*' })),
transition('slide => void', [animate('200ms ease-out', style({ height: 0 }))]),
transition('void => slide', [style({ height: 0 }), animate('200ms ease-out', style({ height: '*' }))])
])
]
})
export class SimExpandable {
private _expanded: boolean = false;
@Input('expanded') set expanded(value: string | boolean) {
this._expanded = (value === 'true' || value === true);
}
get isExpanded(): boolean { return this._expanded }
}
コンポーネントは部分的に正常に動作します。しかし、アニメーションは完璧ではありません。私はease-outアニメーションを使用するようにコンポーネントを設定しましたが、実際にはコンポーネントはリニアにアニメーション化されます。
私はease-out、easeOut、ease-out-cubic、easeOutCubic、ease-in-out、easeInOut、bounce、および他の順列の多くを使用して試してみたが、コンポーネントはまだ直線的にアニメーション化します。私本当に私のコンポーネントのease-outを使用する必要があります。どんな助けでも本当に感謝しています。
[web-animations.js polyfill]（https://github.com/web-animations/web-animations-js）を追加しましたか？ – PierreDuc
angular2文書では、一般的なブラウザ用に追加する必要はありません。テスト用にChromeを使用していますが、明示的に追加することができます。 – AweSIM
その運がありません。=（ – AweSIM