trigger('expandCollapse', [
state('open', style({
'height': '*'
})),
state('close', style({
'height': '0px'
})),
transition('open <=> close', animate(1000))
])
使用此代码对展开折叠进行动画处理,展开折叠工作正常,但使用角度动画框架 4.3.1 时没有高度动画
https://plnkr.co/edit/tY4z1QPvdKMeU6M82cTF?p=preview https://plnkr.co/edit/tY4z1QPvdKMeU6M82cTF?p=preview
为此创建了一个小演示
问题是NoopAnimationsModule
。这有效:
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'my-app',
template: `
<div>
<button (click) ="openReportsFilter()">Open Close</button>
<h2 [@expandCollapse] = 'openCloseAnim'>Hello {{name}}</h2>
</div>
`,
animations: [
trigger('expandCollapse', [
state('open', style({
'height': '*'
})),
state('close', style({
'height': '0px'
})),
transition('open <=> close', animate(1000))
])
]
})
export class App {
name:string;
constructor() {
this.name = `Angular! v${VERSION.full}`
this.openCloseAnim = 'open';
}
openReportsFilter(): void {
this.openCloseAnim = (this.openCloseAnim == 'open') ? 'close' : 'open';
}
}
@NgModule({
imports: [ BrowserModule,BrowserAnimationsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)