1

我在 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 被动画化。

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

4

1 回答 1

0

您只需要使用以下代码重写您的转换代码：

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

它会起作用。

于 2017-06-11T10:12:15.960 回答