CSS анимация при удалении ngOnDestroy или DOM - PullRequest
Новая
       6

CSS анимация при удалении ngOnDestroy или DOM

1 голос
/ 11 июня 2019

Я использую Angular 7 и хочу запустить некоторую CSS-анимацию на элементе хоста компонента, когда этот элемент удален из DOM - компонент уничтожен.

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

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

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Если у вас есть возможность переосмыслить проблему, вы можете сделать что-то подобное с состоянием void Angular Animations и *ngIf.

Импортировать BrowserAnimationsModule в свой app.module.ts: 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [ BrowserAnimationsModule ]
})

Родительский компонент, содержащий ваш подлежащий уничтожению компонент, может реализовать анимацию состояния void и применить ее к дочернему компоненту с помощью *ngIf.Например: 

@Component({

  animations: [
    trigger('animateDestroy', [
      state('void', style({ opacity: '0' })),
      transition('* => void', animate('500ms ease'))
    ])
  ],

  template: `
    <component-to-destroy *ngIf="someBoolean" @animateDestroy>
    </component-to-destroy>
  `

})
export class ParentComponent {
  someBoolean = true;
}

Если вы измените someBoolean на false, Angular удалит компонент из DOM из-за *ngIf.Но перед этим триггер animateDestroy с * => void говорит Angular анимировать перед удалением элемента из DOM.

Некоторое чтение об Angular Animations и состоянии void в документах.

Это не CSS, но это может привести к тому же эффекту, который обеспечивает CSS.Он позволяет шаблону обрабатывать состояние «уничтожен или нет» вашего компонента с помощью логического значения, вместо того, чтобы перепрыгивать через программные циклы внутри класса.

Надеюсь, это немного поможет.

0 голосов
/ 11 июня 2019

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

Вам нужно создать наблюдаемую информацию в службе и вызвать ее в onDestroy.вашего компонента.Тогда подпишитесь на это событие у вашего родителя.

...