Angular 基于组件中条件内容的角度动画

我知道如何制作角度动画，但这次我有一个没有指定高度的组件（它的大小取决于组件内部的内容）。组件实例中已存在高度不同的内容。单击后，它会在下面显示其他内容（即“产品详细信息”），其中显示了一个链接到切换变量

showDetails

的

ngIf

，该变量为布尔值

显示这一点会使组件明显更高

---

有没有一种方法可以设置此转换的动画？

您可以删除

*ngIf

并仅通过动画控制内容的可见性。请尝试以下操作：

组成部分：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('displayState', [
      state('false', style({ overflow: 'hidden', height: '0px'})),
      state('true', style({ overflow: 'hidden', height: '*'})),
      transition('false => true', animate('200ms ease-in')),
      transition('true => false', animate('200ms ease-out'))
    ]),
  ]
})
export class AppComponent  {
  display = false;

  toggle() {
    this.display = !this.display;
  }
}

模板：

<button (mouseup)="toggle()">Toggle</button>
<br><br>

<div [@displayState]="display" [ngStyle]="{'background-color': '#ff000050'}">
  <p>Dynamic content</p>
  <p>that is controlled</p>
  <p>by animation alone</p>
</div>

切换



动态内容

这是可控的

仅凭动画

工作示例：

更新

---

您可以使用现有的布尔值

showDetails

来显示带有转换的其他内容。同样，它仅用动画替换

*ngIf

。工作示例：

这很酷，但我的组件已经有了可变高度的内容；我只是添加了额外的内容。我更新了问题以澄清。很抱歉造成混淆。答案可以根据您的要求进行调整。我已经发布了最新消息。请检查它是否适合你。