Angular2 ng2-bootstrap caving animation

Question

I know that currently the animation code in ng2-bootstrap is commented out due to the inaccessibility of angular2 animation support.

So I created a workaround using angular2 animation in my component.

animations: [
  trigger('slideMenu', [
    state('true', style({ height: '0px' })),
    state('false', style({ height: '*' })),
    transition('1 => 0', animate('200ms ease-in')),
    transition('0 => 1', animate('200ms ease-out'))
  ]),
]

Update: I have a plunker example: https://plnkr.co/edit/iVffRLUhzp43DXo5BYlJ?p=preview (If the example failed to load, click the stop and start button several times. This will eventually work).

I want the above animation code to create a silde-out effect when expanding and pasting into action when minimized. However, animation only works when expanded. When I try to collapse the menu, it just disappeared without animation.

, - .

.

Answer 1

, , , , , .

:

, ng2-bootstrap current collapse display: none display: block, . ( , ).

, - , . ng2-bootstrap , Angular 2+ , - , ( , ). , .

:

, , , , DRY . , , , , :

• ng2-bootstrap , , . [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', style({ height: '0px' })),
        state('false', style({ height: '*' })),
        transition('1 => 0', animate('500ms ease-in')),
        transition('0 => 1', animate('500ms ease-out'))
    ]);
}

app.component.ts

import { Component, trigger, state, style, transition, 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>