如何在角度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在父母身上，但无论如何，这里有很多重复的动画代码。无论如何要处理父级的动画？

答

的问题是，自定义元素，<start>，<family>和<about>没有定型，因此display默认为inline，这是不能被翻译。只需将其添加到您的父级样式表中即可：

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

它应该可以工作。

不幸的是，有[无法]（https://stackoverflow.com/questions/31480950/custom-element-selector）来选择所有的自定义元素。类或数据属性可以工作。 –

如何在角度2中动画子组件？

相关推荐