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

Question

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

我对动画真的很陌生，并且在将组件样式留在 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%)'}))
    ])
  ]);
}

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

How to change states at the end of an animation transition? - Angular 2

animation

state

typescript

angular