角度动画：组件在触发动画之前被杀死

Question

我正在尝试从管理视图的 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 - 当我关闭 popin 时，向下滑动的动画不起作用。仅当我删除评论中的行时才有效。

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

2 - 似乎角度不读取过渡“打开”和“关闭”的状态

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

只有当我像这样使用 * 时它才有效：

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

这里是codesandbox代码：

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

Answer 1

在您的 popin.component.html 文件中，您使用 *ngIf="isPopinOpen" 来显示/隐藏 div。在同一个 div 上，您在 click 事件上调用 closePopin() 函数。

因此，每次单击 div 时，isPopinOpen 变量都会更改为 false，从而隐藏包含动画内容的 div。

1 - 当我关闭 popin 时，向下滑动的动画不起作用。仅当我删除注释中的行时它才有效。

向下滑动的动画效果很好。您无法看到动画，因为一旦您单击 div，该 div 就会隐藏，因为 isPopinOpen = false

要解决此问题，您需要在 app.component.ts 文件中的 closeThePopin() 函数或 popin.component.tsclosePopin() 函数上使用 setTimeout 函数/strong> 文件，但不在这两个函数中。

我在app.component.ts文件closeThePopin()函数中添加了setTimeOut函数

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

工作代码示例：CodeSandBox

Answer 2

您需要与Animations callback“玩”或使用:enter and :leave aliases。请注意，如果您有 *ngIf 如果为 false，则无法制作动画。

使用动画回调是改变一些你的弹出组件

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

看到click()只改变了变量“isPopinAnimationActive”

在 (@openClose.done)where，如果isPopinAnimationActive=false，执行函数“closePopin()”发出事件。

我使用“缩写”方法"condition && myFunction()"。如果条件为真，则执行函数，如果条件为假，则不执行函数。

使用 :enter 和 :leave 允许在 *ngIf 下设置动画组件