因此,我在组件中使用angular2的animate创建了一个变通方法.
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'))
]),]
更新：我有plunker示例：https://plnkr.co/edit/iVffRLUhzp43DXo5BYlJ?p=preview(如果无法加载示例,请多次单击停止并运行按钮.它最终会起作用).
我希望上面的动画代码在展开时创建出色效果,并在折叠时创建滑入效果.但是,动画仅在扩展时有效.当我尝试折叠菜单时,它就消失了,没有任何动画.
我想知道是否有人试图为slide-int和slide-out垂直创建折叠菜单的工作方法.
提前致谢.
解决方法
根本原因：
正如您所指出的,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>
