Блог

Я пытаюсь запустить анимацию из popin.component.ts, которые управляют представлением.

 import { Component, EventEmitter, Input, Output } from "@angular/core";
import {
  trigger,
  state,
  style,
  animate,
  transition
} from "@angular/animations";

@Component({
  selector: "app-popin",
  templateUrl: "./popin.component.html",
  styleUrls: ["./popin.component.css"],
  animations: [
    trigger("openClose", [
      state(
        "open",
        style({
          transform: "translateY(0%)"
        })
      ),
      state(
        "closed",
        style({
          transform: "translateY(100%)"
        })
      ),
      transition("* => *", animate(500))
    ])
  ]
})
export class PopinComponent {
  @Input() isPopinOpen = false;
  @Input() isPopinAnimationActive = false;
  @Output() isPopinClosed = new EventEmitter<boolean>();

  closePopin() {
    this.isPopinClosed.emit(this.isPopinAnimationActive);
  }
}

 

Родительский компонент управляет логическим значением для изменения состояния.

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isPopinAnimationActive: boolean;
  isPopinOpen: boolean;
  animate() {
    this.isPopinOpen = true;
    this.isPopinAnimationActive = true;
  }

  closeThePopin() {
    this.isPopinOpen = false;
    this.isPopinAnimationActive = false;
  }
}
 

У меня есть 2 проблемы.

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

   closeThePopin() {
    // this.isPopinOpen = false;
    this.isPopinAnimationActive = false;
  }
 

2 — Похоже, что angular не считывает состояние для перехода «открыто» и «закрыто»

 transition("open => closed", animate(500))
 

Это работает только тогда, когда я использую * вот так:

 transition("* => *", animate(500))
 

вот код codesandbox:

https://codesandbox.io/s/lucid-wilson-lqzw2?file=/src/app/app.component.ts

вам нужно «поиграть» с обратным вызовом анимации или использовать :введите и :оставьте псевдонимы. Примите во внимание, что если *ngIf у вас есть если ложно, то анимировать невозможно.

Использование анимации обратного вызова-это изменение нескольких ваших всплывающих компонентов

 <div class="container" *ngIf="isPopinOpen " (click)="isPopinAnimationActive=false">
  <div class="popin" (@openClose.done)="!isPopinAnimationActive amp;amp; closePopin()" 
       [@openClose]="isPopinAnimationActive ? 'open': 'closed'">
    content
  </div>
</div>
 

Видите, что click() единственное изменение переменной «isPopinAnimationActive»

В (@openClose.done) где, если isPopinAnimationActive=false, выполните функцию «closePopin ()», чтобы вызвать событие.

Я использую метод «абревиатуры» "condition amp;amp; myFunction()" . Если условие истинно, функция выполняется, если условие ложно, функция не выполняется.

Использование :введите и :оставьте разрешить анимацию компонентов под *ngIf

В вашем popin.component.html файл, который вы используете *ngIf="isPopinOpen" для отображения/скрытия div. В том же div вы вызываете closePopin() функцию при click событии.

Таким образом, каждый раз, когда вы нажимаете на div, переменная isPopinOpen изменяется на false, что скрывает div, содержащий анимационный контент.

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

Анимация для скольжения вниз работает отлично. Вы не можете видеть анимацию, потому что, как только вы нажимаете на div, этот div скрывается, потому что isPopinOpen = false

Чтобы решить проблему, вам нужно использовать setTimeout функцию на closeThePopin() функции в файле app.component.ts или на closePopin() функции в файле popin.component.ts, но не в обеих функциях.

Я добавил setTimeOut функцию в функцию файла app.component.ts closeThePopin()

 closeThePopin() {
    // Added
    setTimeout(() => {
      this.isPopinOpen = false;
    }, 1000);
    this.isPopinAnimationActive = false;
}
 

Пример рабочего кода: CodeSandbox