2017-02-16 18 views
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のためだと思うが、それにもかかわらず、これには多くの繰り返しアニメーションコードがある。親レベルでアニメーションを処理する方法はありますか?

答えて

2

問題は、カスタム要素、<start><family>ということで、<about>は何のスタイルを持っていないので、翻訳することはできませんinlineからdisplayデフォルトは、。単にあなたの親スタイルシートにこれを追加します。

about, start, family { 
    display: block; 
    /*Any other layout code, e.g. position:absolute */ 
} 

そして、それは動作するはずです。

+0

悲しいことに、すべてのカスタム要素を選択するための[方法](https://stackoverflow.com/questions/31480950/custom-element-selector)はありません。しかし、クラスやデータの属性は機能します。 –

関連する問題