Анимация Angular 8 воспроизводится только при загрузке страницы, а не по событию - PullRequest
Новая
       27

Анимация Angular 8 воспроизводится только при загрузке страницы, а не по событию

0 голосов
/ 08 октября 2019

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

Эта анимация в настоящее время работает очень хорошо, когда вы закрываете список, но некогда ты откроешь это. Единственное исключение здесь заключается в том, что он запускает анимацию при загрузке страницы, что также является тем, что мы хотим.

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

Определение анимации : 

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

export const collapsableList = trigger('collapsableListTrigger', [
  transition(
    // transforming from any state to shown, will play on page load
    '* => show',
    [
      query('.key', [
        // starting style state
        style({ height: '0px', opacity: 0 }),
        // plays animations in sequence with a 0ms delay between
        stagger(0, [
          // animation times matter, these aren't being ignored, but they also aren't being shown. AKA The list waits 0.75 seconds before popping open without an animation
          animate('0.5s ease-out', style({ height: '{{startHeight}}px' })),
          animate('0.25s ease-out', style({ opacity: 1 }))
        ])
      ])
    ],
    { params: { startHeight: 0 } }
  ),
  // I expected to need a state here, but it breaks the other animation, and the page load animation works just fine with out.
  // state('show', style({ height: '{{startHeight}}px', opacity: 1 }), { params: { startHeight: 0 } }),
  transition(
    // trasnforming from show to hide state
    'show => hide',
    [
      query('.key', [
        // starting style state
        style({ height: '{{startHeight}}px', opacity: 1 }),
        stagger(0, [
          animate('0.25s ease-out', style({ opacity: 0 })),
          animate('0.5s ease-out', style({ height: '0px' }))
        ])
      ])
    ],
    { params: { startHeight: 0 } }
  ),
  // style state for when transition to hide is finished
  state('hide', style({ height: '0px', opacity: 0 }))
]);

Директива 

import { Directive, ElementRef, HostBinding, Input } from '@angular/core';

@Directive({
  selector: '[collapsableList]'
})
export class CollapsableListAnimationDirective {
  @Input() collapsableList: boolean;

  constructor(private element: ElementRef) {}

  // Name should match trigger in animation, this passes in data to the animation and causes it to fire
  // Should fire on any input change
  @HostBinding('@collapsableListTrigger') get collapsableListTrigger(): any {
    const ret = { value: this.collapsableList ? 'show' : 'hide', params: { startHeight: this.element.nativeElement.clientHeight } };
    return ret;
  }
}

Мое использование директивы

showList - это логическое переключение, основанное на щелчке в другом месте, где на странице 

  <div [collapsableList]="showList">
    <div class="key">
      <div *ngFor="let stuff of stuff$ | async">

      </div>
    </div>
  </div>
...