单击淡出和淡入动画角

Question

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

• 当页面初始呈现时，有div元素显示一些number。左右有我两个按钮。

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

我的问题是，当用户单击动画工作淡入部分的那些按钮淡出部分之一时，则无法工作。

这是stackblitzexample

Answer 1

您可以使用以下简单步骤完成此操作，无需使用函数即可完成仅需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>

Answer 2

它正在按预期工作。单击按钮时，有两种状态可以切换。在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