4
親コンポーネントにアニメーションを追加しようとしました。そのため、子コンポーネント:enterまたは:leaveのときにスライドエフェクトが表示されます。ここに私の親@Componentがある:角度2で子コンポーネントをアニメーション化する方法は?
@component({
selector: 'plan',
templateUrl: '../templates/plan.tpl.html',
styleUrls: ['../../../../assets/css/plan.scss'],
animations: [
trigger('stepAnimation', [
transition(':enter', [
style({transform: 'translateX(100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [ // before 2.1: transition('* => void', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
])
])]
})
それから私は、次のようにテンプレート内の子要素にアニメーションセレクターを追加しました:
<start *ngIf="currentPage == 'start'" @stepAnimation></start>
<about *ngIf="currentPage == 'about'" @stepAnimation></about>
<family *ngIf="currentPage == 'family'" @stepAnimation></family>
アニメーションが動作しません。次に、各コンポーネントの内部にアニメーションコードを追加し、各テンプレートの親タグに@stepAnimationを追加します。この方法では、私は入力アニメーションを取得しますが、離れることはありません。私はそれが親のngIfのためだと思うが、それにもかかわらず、これには多くの繰り返しアニメーションコードがある。親レベルでアニメーションを処理する方法はありますか?
悲しいことに、すべてのカスタム要素を選択するための[方法](https://stackoverflow.com/questions/31480950/custom-element-selector)はありません。しかし、クラスやデータの属性は機能します。 –