如何在角度2中動畫子組件？

我試圖在父組件上添加動畫，所以當子組件：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在父母身上，但無論如何，這裏有很多重複的動畫代碼。無論如何要處理父級的動畫？

來源

2017-02-16 iMad

的問題是，自定義元素，<start>，<family>和<about>沒有定型，因此display默認爲inline，這是不能被翻譯。只需將其添加到您的父級樣式表中即可：

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

它應該可以工作。

來源

2017-07-06 04:21:25

不幸的是，有[無法]（https://stackoverflow.com/questions/31480950/custom-element-selector）來選擇所有的自定義元素。類或數據屬性可以工作。 –

如何在角度2中動畫子組件？

回答

相關問題