Question

我在Angular2中有以下组件。

@Component({
  selector: 'nav-menu-item',
  styleUrls: ['./menu-item.component.scss'],
  animations: [
    trigger('collapsedState', [
      state('collapsed', style({
        height: 0
      })),
      state('expanded', style({
        height: '100%'
      })),
      transition('* => expanded',  [style({height: 0}),      animate(600, style({height: '100%'}))]),
      transition('* => collapsed', [style({height: '100%'}), animate(600, style({height: 0}))])
    ])
  ],
  template: `
    <li *ngIf="!config.children">
      <button (click)="onClick()">
        <i class="fa {{config.iconCls}}"></i> {{config.text | translate}}
      </button>
    </li>
    <li *ngIf="config.children" class="submenu">

      <button  (click)="toggleCollapsed()">
        <i class="fa {{config.iconCls}}"></i> {{config.text | translate}}
      </button>

      <ul [@collapsedState]="collapsed">
        <nav-menu-item *ngFor="let child of config.children" [config]="child"></nav-menu-item>
      </ul>

    </li>
  `
})

我已经阅读了有关Angular2动画的文章。 https://angular.io/docs/ts/latest/guide/animations.html

有人提到在转换完成后应用state.style（样式为持久性）。

在开始之前应用transition.style，并将transition.animate.style设置为动画。

由于某些原因，在我的Component中，状态切换但没有动画...只有state.styles在动画时间之后应用。

Answer 1

您只需使用以下内容重写转换代码：

transition('* => expanded', animate( '600ms linear')),
transition('* => collapsed', animate( '600ms linear')),

它会起作用。

Angular2动画没有动画效果

1 个答案: