Question

在我的应用中，我有2个同级元素。一个元素被隐藏了，我可以通过按钮切换它的可见性。当隐藏的元素变为可见时，我添加了动画。问题是，同级元素没有动画。它只是跳到了新位置。任何想法如何解决这个问题？请参见stackblitz示例。

app.component.ts

import { Component } from '@angular/core';
import { animate, style, transition, trigger } from "@angular/animations";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css',],
  animations: [
      trigger(
          "enterAnimation", [
              transition(":enter", [
                  style({transform: "translateY(-100%)", opacity: 0}),
                  animate("500ms", style({transform: "translateY(0)", opacity: 1}))
              ]),
              transition(":leave", [
                  style({transform: "translateY(0)", opacity: 1}),
                  animate("500ms", style({transform: "translateY(-100%)", opacity: 0}))
              ])
          ]
      )
  ],
})
export class AppComponent  {
  visible: boolean = false;

  toggle(): void {
    this.visible = !this.visible;
  }
}

app.component.html

<div class="box1" *ngIf="visible" [@enterAnimation]></div>
<div class="box2"></div>

<button (click)="toggle()">Toggle</button>

Answer 1

不是使用transform而是使用height来获得那种效果。 demo

config/meta.yml.erb

动画同级元素

1 个答案: