Angular анимация на основе условного содержимого в компоненте - PullRequest
Новая
       21

Angular анимация на основе условного содержимого в компоненте

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

Я знаю, как сделать angular анимацию, но на этот раз у меня есть компонент, который не имеет заданной высоты (его размеры основаны на том, что внутри компонента). В экземплярах компонента уже есть содержимое различной высоты. При щелчке он отображает дополнительное содержимое ниже (то есть «сведения о продукте»), отображаемое с помощью ngIf, связанного с переключаемой переменной showDetails, которая является логическим значением.

Отображение этого делает компонент заметно выше.

Есть ли способ оживить этот переход?

1 Ответ

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

Вы можете удалить *ngIf и контролировать видимость контента только с помощью анимации. Попробуйте следующее:

Компонент: 

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('displayState', [
      state('false', style({ overflow: 'hidden', height: '0px'})),
      state('true', style({ overflow: 'hidden', height: '*'})),
      transition('false => true', animate('200ms ease-in')),
      transition('true => false', animate('200ms ease-out'))
    ]),
  ]
})
export class AppComponent  {
  display = false;

  toggle() {
    this.display = !this.display;
  }
}

Шаблон: 

<button (mouseup)="toggle()">Toggle</button>
<br><br>

<div [@displayState]="display" [ngStyle]="{'background-color': '#ff000050'}">
  <p>Dynamic content</p>
  <p>that is controlled</p>
  <p>by animation alone</p>
</div>

Рабочий пример: Stackblitz

Обновление

Вы можете использовать существующее логическое значение showDetails, чтобы показать дополнительный контент с переходом. Снова он заменяет *ngIf только анимацией. Рабочий пример: Stackblitz

...