我尝试在父组件上添加动画,因此当子组件:enter 或:leave 时,会显示滑动效果。这是我的 parent @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 但无论如何,有很多重复的动画代码。无论如何都可以在父级处理动画吗?
最佳答案
问题是自定义元素,<start>
, <family>
, 和 <about>
没有样式,因此 display
默认为 inline
,无法翻译。只需将其添加到您的父样式表中:
about, start, family {
display: block;
/*Any other layout code, e.g. position:absolute */
}
它应该可以工作。
关于angular - 如何为 Angular 2 中的子组件设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42263032/