角度 4 上的动画似乎没有过渡效果

Posted 2023-03-06

【中文标题】角度 4 上的动画似乎没有过渡效果

【英文标题】：animation on angular 4 doesn't seem to have transition effect

【发布时间】：2018-01-10 01:22:53

【问题描述】：

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

为此创建了一个小演示

【参考方案1】：

我稍微修改了您的代码。你可以在这里查看演示：https://plnkr.co/edit/S7YdfUZN2t0fey9pgo6x?p=preview

//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 *ngIf="openCloseAnim" [@expandCollapse] = 'openCloseAnim'>Hello name</h2>
    </div>
  `,
  animations: [
        trigger('expandCollapse', [ 
          state('expandCollapseState', style(height: '*')),
      transition('* => void', [style(height: '*'), animate(1000, style(height: "0")) ]),
      transition('void => *', [style(height: '0'), animate(1000, style(height: "*")) ])
    ]
)
export class App 
  name:string;
  openCloseAnim: boolean = true;
  constructor() 
    this.name = `Angular! v$VERSION.full`
  
  openReportsFilter(): void 
    console.log('clicked');
    this.openCloseAnim = !this.openCloseAnim;
    console.log(this.openCloseAnim);
        //this.openCloseAnim = (this.openCloseAnim == true) ? false : true;
    


@NgModule(
  imports: [ BrowserModule,BrowserAnimationsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
)
export class AppModule 

【讨论】：

虽然这个有效，但它删除并附加了我不想做的元素

【参考方案2】：

问题在于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