Как анимировать дочерние компоненты в угловом 2?

Question

Я попытался добавить анимацию к родительскому компоненту, поэтому, когда дочерние компоненты: введите или: оставьте, появится эффект скольжения. Вот мой родитель @component:

@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 для родителя, но независимо от того, есть много кода повторной анимации с этим. Будет ли в любом случае обработать анимацию на родительском уровне?

Answer 1

Проблема заключается в том, что пользовательские элементы, <start>, <family> и <about> не имеют стиль и поэтому display по умолчанию в inline, которые не могут быть переведены. Просто добавьте это в таблицу ваших родителей:

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

И это должно сработать.