单击时淡出和淡入动画 Angular

Question

我为 div 元素实现了淡入淡出动画。我想做的是这样的。

• 当页面初始渲染时，有一个 div 元素显示一些数字。右侧和左侧有两个按钮。

• 当用户单击这些按钮之一时，我想删除 div 元素中的数字并添加显示 div 中新创建的数字

我的问题是，当用户单击这些按钮之一时，动画淡出部分的工作淡入部分不起作用。

这是 stackblitz 的 例子

Answer 1

它正在按预期工作。单击按钮时会切换两种不同的状态。状态下initial，不透明度为1，显示数据。在final状态下，不透明度为0。因此，直到您再次切换到状态时才会显示数据initial。

为了实现您想要的行为，您可以仅使用一种状态并使用:enter和:leave转换来在不透明度之间切换。下面应该做到这一点。

成分

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
   animations:[
    trigger('fade', [
      state('in', style({ opacity: 1 })),
      transition(':enter', [ style({ opacity: 0 }), animate(600) ]),
      transition(':leave', animate(600, style({ opacity: 0 })))
    ])
  ]
})
export class AppComponent  {
  array = [0, 10, 20, 30, 50]

  goToPrevSet(){
    this.array = this.array.map(data => data - 5)
  }

  goToNextSet(){
    this.array = this.array.map(data => data + 5)
  }
}

模板

<div class="main-container" style="display:inline-flex">
  <button style="padding:5px;font-size:17px;border: 1px solid #1eb2a6; background-color:#d4f8e8;border-radius:5px;cursor: pointer" (click)="goToPrevSet()">Prev</button>
  <div *ngFor="let item of array">
    <div style="padding:5px;" [@fade]="'in'">{{item}}</div>
  </div>
  <button style="padding:5px;font-size:17px;border: 1px solid #1eb2a6; background-color:#d4f8e8;border-radius:5px;cursor: pointer" (click)="goToNextSet()">Next</button>
</div>

工作示例：Stackblitz

Answer 2

您可以使用以下简单步骤来完成此操作，无需使用函数来完成一项小工作，只需 1 行 css 即可轻松完成。

删除所有动画代码并注释掉从 ts 调用的changeAnimationState()

.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

<div class="animate-opacity" style="padding:5px;">{{item}}</div>