在按钮点击时显示 angular 动画

Question

我想在按钮点击时触发动画

  animations: [
  trigger('simpleFadeAnimation', [
  state('in', style({opacity: 1})),
  transition(':enter', [
    style({opacity: 0}),
    animate(300 )
  ]),
  transition(':leave',
    animate(0, style({opacity: 0})))
])
],

模板

  <div class="flex-align h-100"   [@simpleFadeAnimation]>
  <div class="description">{{ screens[currentIndex].title }}</div>
  </div>

现在动画在页面加载时显示，我想在每次“currentIndex”更改时显示淡入动画

Answer 1

当 currentIndex 更新时，您需要在您的组件中使用两个动画和切换动画。

我想下面的例子可以帮到你

@Component({
  ...
  animations: [
    trigger('simpleFadeAnimation', [
      state('hidden', style({
        opacity: 0
      })),
      state('visible', style({
        opacity: 1
      })),
      transition('hidden <=> visible', [
        animate('0.3s ease')
      ])
    ])
  ]
})
export class AppComponent {
  currentState = 'hidden';
  currentIndex = 1;
  nextIndex = null;

  changeCurrentIndex() {
    this.currentState = 'hidden';
    this.nextIndex = 2;
  }

  animationFinished(event: AnimationEvent) {
    if (event.fromState === 'void' && event.toState === 'hidden') {
      this.currentState = 'visible';
    } else if (event.fromState === 'visible' && event.toState === 'hidden') {
      this.currentState = 'visible';
      this.currentIndex = this.nextIndex;
    }
  }
}

<div class="flex-align h-100" [@simpleFadeAnimation]="currentState" (@simpleFadeAnimation.done)="animationFinished($event)">
  <div class="description">{{ screens[currentIndex].title }}</div>
</div>

在按钮点击时显示 angular 动画

Show angular animation in button click

angular

angular-animations