Angular2：你如何并行运行2个动画？

发布时间：2020-12-17 07:23:51 所属栏目：安全来源：网络整理

导读：我有一个扩展/收缩的容器.容器内部有一个元素,当容器膨胀时应该淡入,当容器收缩时应该淡出. 我的问题当容器展开时,两个元素的动画都有效. 当容器缩小时,只有容器动画才有效. 如果我删除容器扩展动画,则淡入/淡出动画将按预期工作. 如何在扩展/收缩条件下并

我有一个扩展/收缩的容器.容器内部有一个元素,当容器膨胀时应该淡入,当容器收缩时应该淡出.

我的问题

>当容器展开时,两个元素的动画都有效.
>当容器缩小时,只有容器动画才有效.
>如果我删除容器扩展动画,则淡入/淡出动画将按预期工作.

如何在扩展/收缩条件下并行执行所有动画？

注意使用ngIf.这是故意的,因为它会破坏动画序列末尾的元素.

这是我目前状态的一个吸引人：
https://embed.plnkr.co/TXYoGf9QpErWmlRvQF9Z/

组件类：

export class App {
  expanded = true;

  toggleExpandedState() {
    this.expanded = !this.expanded;
  }

  constructor() {
  }
}

模板：

<div class="container" [@expansionTrigger]="expanded">
  <div class="constant-item"></div>
  <div class="fade-item" [@stateAnimation] *ngIf="expanded"></div>
</div>

<button (click)="toggleExpandedState()">Toggle Fade</button>

和组件动画：

trigger('expansionTrigger',[
    state('1',style({
      width: '250px'
    })),state('0',style({
      width: '160px'
    })),transition('0 => 1',animate('200ms ease-in')),transition('1 => 0',animate('200ms ease-out'))
  ]),trigger('stateAnimation',[
    transition(':enter',[
      style({
        opacity: 0
      }),animate('200ms 350ms ease-in',style({
        opacity: 1
      }))
    ]),transition(':leave',[
      style({
        opacity: 1
      })
      animate('1s',style({
        opacity: 0
      }))
    ])
  ])

这是你需要做的：

plnkr这里：https://plnkr.co/edit/AQEVh3GGc31ivQZMp223?p=preview

remove * ngIf =“expanded”use [@stateAnimation] =“expanded”

用这个替换你的stateAnimate触发器：

trigger('stateAnimation',[
          state('1',style({ opacity: 0 })),style({opacity: 1})),animate('200ms ease-out'))
        ])

这是完整的代码：

//our root app component
import {Component,NgModule,VERSION,Output,trigger,state,style,transition,animate,} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'my-app',template: `
    <div class="container" [@expansionTrigger]="expanded">
      <div class="constant-item"></div>
      <div class="fade-item" [@stateAnimation]="expanded"></div>
    </div>

    <button (click)="toggleExpandedState()">Toggle Fade</button>
  `,animations: [
    trigger('expansionTrigger',[
      state('1',style({ width: '250px' })),style({width:'160px'})),animate('200ms ease-out'))
    ]),animate('200ms ease-out'))
    ])
  ]
})
export class App {
  expanded = true;

  toggleExpandedState() {
    this.expanded = !this.expanded;
  }

  constructor() {
  }
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!