Question

您好我正在尝试让我的angular 2应用程序进行路由器转换，如本教程所示。

我对动画真的很陌生，并且遇到状态问题，将组件样式保留在位置：固定，不允许滚动。我想知道如何在：entry 转换结束时将状态更改为用户定义的状态。

function slideToRight() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    state('visible', style({position:'static', width:'initial'}) ),
    transition(':enter => visible', [ //<-- my attempt at switching the state
      style({transform: 'translateX(-100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})),
    ]),
    transition('visible => :leave', [ //<-- my attempt at switching the state
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
    ])
  ]);
}

Answer 1

请尝试将style放在转换中。

slideToLeft函数示例：

function slideToLeft() {
  return trigger('routerTransition', [
    transition(':enter', [
      style({transform: 'translateX(100%)', position:'fixed', width:'100%'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateX(0%)', position:'fixed', width:'100%'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ]);
}

如何在动画过渡结束时更改状态？ - Angular 2

1 个答案: