Анимация постепенного исчезновения и постепенного появления Angular - PullRequest
Новая
       20

Анимация постепенного исчезновения и постепенного появления Angular

0 голосов
/ 11 марта 2020

Я реализовал анимацию постепенного исчезновения для элемента div. то, что я хочу сделать, это что-то вроде этого.

  • когда рендеринг начальной страницы есть элемент div, отображающий некоторое число. на правой и левой стороне у меня две кнопки.

  • Когда пользователь нажимает на одну из этих кнопок, я хочу удалить числа в элементе div и добавить отображение вновь созданных чисел в div

Моя проблема когда пользователь нажимает на одну из этих кнопок, часть исчезновения рабочей анимации не работает.

это стек-блиц пример

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

Работает как положено. У вас есть два разных состояния, которые переключаются при нажатии кнопки. В состоянии 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

0 голосов
/ 11 марта 2020

Это можно сделать, выполнив следующий простой шаг. Не нужно использовать функцию для выполнения небольшой работы, которая легко возможна всего за 1 строку css.

Удалите весь код анимации и закомментируйте changeAnimationState ( ) звонит с тс 

.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
<div class="animate-opacity" style="padding:5px;">{{item}}</div>
...