Question

在Angular 2中，我想将一些绝对定位元素设置为某个运行时值的动画（一旦填充了数据）。我怎么做？我可以更改代码中的状态设置吗？（或者有一些回调？）

@Component({
   animations: [
      trigger('blahState', [
       state ('closed', style({ top: '0px'} )),
       state ('open', style({ top: ??? (<= must be the position of some dom element) })),
       transition('closed => open', animate('500ms ease-in'))])
      ]
})

Answer 1

您可以更改“状态”状态。在您的组件类中：

例如：

组件模板：

<div [@blahState]="my_animation_state"></div>

和组件类：

  export MyComponent{
     public my_animation_state:string = 'open';
     toggleState() {
        this.my_animation_state == 'open' ? 'closed' : 'open';
     }
  }

当您从“关闭”状态更改状态时，您将获得转换。打开＆＃39;

transition('closed => open', ...

最后一件事，你可以在动画结束或开始时调用事件：

<div [@blahState]="my_animation_state" (@blahState.done)="animationDone()" (@blahState.start)="animationStart()></div>

和你的组件类：

animationStart() {
// your code
}

animationDone(){
// your code
}

祝你好运！

在Angular 2.如何设置某个运行时值的动画？

1 个答案: