angular2 ng2-bootstrap折叠动画解决方法

根本原因：

正如您所指出的,ng2-bootstrap的当前折叠实现只是在display：none和display：block之间切换元素显示样式,因为你可以see in the source.对display属性的这一改变使转换动画无效(至少目前,浏览器不尊重显示属性更改时的转换).

看起来崩溃实现的预期默认行为是动画,但是有一个障碍.由于用于折叠的ng2-bootstrap实现使用指令,因此它们正在等待Angular 2对指令动画的支持,这些指令不存在 – 至少是(但是在组件上,正如您当前使用的那样).这是一个已知问题,已报告为here.

解决方法：

您表示您打算在多个地方制作动画,这表明您可以从动画重复使用中受益 – 这将使事情变得更加容易管理DRY.在您需要动画时搞乱了一堆解决方法选项之后,我认为最好是：

>不要将ng2-bootstrap的collapse指令用于模板中需要设置动画的项目.在您的示例中,[collapse] = isCollapsed()(正如您所确定的那样).
>像现在一样在组件上指定动画.
>创建一个类来定义动画,使它们可以恢复.
>将动画从#2设置为#3中的相应对象.

这是一个例子：

animations.ts

import { trigger,state,transition,animate,style } from '@angular/core';

export class Animations {
    public static slideInOut = trigger('slideInOut',[
        state('true',animate('500ms ease-in')),animate('500ms ease-out'))
    ]);
}

app.component.ts

import { Component,trigger,style,animate } from '@angular/core';
import { Animations } from './animations';

@Component({
  selector: 'my-app',templateUrl: './app/app.component.html',styleUrls: ['./app/app.component.css'],animations: [ Animations.slideInOut ]
})
export class AppComponent { 
  private collapsed: boolean;

  constructor() {
    this.collapsed = true;
  }

  public isCollapsed(): boolean {
    return this.collapsed;
  }

  public setCollapsed(): void {
    this.collapsed = true;
  }

  public toggleMenu(): void {
    this.collapsed = !this.collapsed;
  }
}

app.component.html

<header>
    <nav class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" (click)="toggleMenu()">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
            </div>
        </div>
    </nav>

    <nav role="navigation" class="navbar-fixed-top-responsive">
        <div class="vertical-menu" [@slideInOut]="isCollapsed()">
            <ul class="menu-item">
                <li><a>menu1</a></li>
                <li><a>menu2</a></li>
                <li><a>menu3</a></li>
            </ul>
        </div>
    </nav>
</header>