Angular анимация просто работает внутри app.component - PullRequest
Новая
       21

Angular анимация просто работает внутри app.component

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

пытается использовать Angular Анимации для анимации div, но работает только в главном файле (app.container. html), НЕ в другом компоненте, который я создал.

Это анимация: (работает) 

  trigger('notificationAnimations', [
    transition(
      ':enter', 
      [
        style({ transform: 'translateY(100%)', opacity: 0 }),
        animate('0.2s ease-in', 
                style({ transform: 'translateY(0%)', opacity: 1 }))
      ]
    ),
    transition(
      ':leave', 
      [
        style({ transform: 'translateY(0%)', opacity: 1 }),
        animate('0.2s ease-out', 
                style({ transform: 'translateY(100%)', opacity: 0 }))
      ]
    )
  ]),
];

Класс div, который должен быть анимирован: 

import { Component } from '@angular/core';

import { notificationAnimations } from '@app/modules/ux/animations/pop-up.animations';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up-bottom.component.html',
  styleUrls: ['./pop-up-bottom.component.sass'],
  animations: notificationAnimations
})
export class PopUpBottomComponent implements OnInit {

  public isOpen: boolean = true;

  constructor() { }

  ngOnInit(): void { }

  public closePopUp(): void {
    this.isOpen = false;
  }

}

и HTML: 

   <div class="app-pop-up" *ngIf="isOpen" (click)="closePopUp()" @notificationAnimations>
   ...
   <div>

Это работает в приложении. контейнер. html, но НЕ в home.component. html ... И то же самое. Итак, я не знаю, есть ли css правила, которые могут заставить эту angular анимацию не работать, или что происходит, потому что я использую этот компонент как

<app-pop-up></app-pop-up> в home.container. html, а также в app.container. html, поэтому я не знаю, почему работает только в контейнере приложения, а НЕ в домашнем контейнере, BrowserAnimationsModule импортируется в app.module.ts, поэтому он доступен для внутренних модулей. Так что это не проблема, и если я проверяю элемент во время анимации, я вижу, как angular анимации и класс к элементу, но НЕ анимируют его в home.container

...