时间戳

首页 > 解决方案 > 角度动画 - 改进基本代码

angular - 角度动画 - 改进基本代码

问题描述

嘿，我有以下动画。这里的目标是让它具有反弹效果，使元素变大，然后恢复到原来的大小。我的问题是，有没有办法改进这段代码？它可以工作，但我必须手动更改状态并计算延迟等等......

animations: [
    trigger('balloonEffect', [
      state('initial', style({
        transform: 'scale(1)'
      })),
      state('final', style({
        transform: 'scale(1.4)'
      })),
      transition('final=>initial', animate('300ms')),
      transition('initial=>final', animate('300ms'))
    ]),
  ]

currentState = 'initial';

  changeState() {
    this.currentState = 'final';
    setTimeout(() => this.currentState = 'initial', 300)
  }

  <button [disabled]="isFormSelectionCompleted()"
                *ngIf="hasNoForms()"
                (click)="changeState()"
                [@balloonEffect]=currentState
                mat-raised-button color="primary"
                #addButton>Stwórz</button>

标签： angularcss-animations

解决方案

keyframes如果您不想管理动画持续时间和状态，可以使用setTimeout. 我认为它更清洁：

function balloonEffect() {
  return trigger('balloonEffect', [
    transition('true <=> false', [
      animate('500ms', keyframes( [
        style({ transform: 'scale(1)' }),
        style({ transform: 'scale(1.5)' }),
        style({ transform: 'scale(1)' })
      ]))
    ])
  ]);
}

<button [@balloonEffect]="triggerBalloon" (click)="showDetails()">
  Show details
</button>

在组件中：

@Component({
  ...
  animations: [balloonEffect()]
})
export class MyComponent {

  constructor() {}

  triggerBalloon = false;

  showDetails() {
    this.triggerBalloon=!this.triggerBalloon;
    console.log('Do stuff');
  }
}

我们还可以在模板本身中触发效果并将其从 componentsshowDetails方法中删除：

<button [@balloonEffect]="triggerBalloon" 
        (click)="triggerBalloon=!triggerBalloon;showDetails()">
  Show details
</button>

这是闪电战

推荐阅读