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

Question

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

Router Transition Tutorial

Demo Link

我对动画真的很陌生，并且在将组件样式留在 position:fixed 不允许滚动的状态下遇到问题。我想知道如何在 :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%)'}))
    ])
  ]);
}