如何在 Angular 中提供动画答案

【问题标题】：How do I give animation in Angular如何在 Angular 中提供动画
【发布时间】：2021-08-04 22:58:34
【问题描述】：

我正在尝试创建一个应用程序，我想将 Angular 动画提供给 span。我参考了这个例子StackBlitz Example 之后我尝试创建自己的span。我在这里创建了一个MyStackBlitz 来提供一个我正在做的例子。

如示例所示，我想将折叠动画添加到span。

我已经尝试从我提供的参考示例中做到这一点，但我陷入了不知道自己做错了什么的地步。

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

要使其更接近您尝试复制的示例，您需要执行以下操作。

首先您需要将BrowserAnimationsModule 导入到您的模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

接下来，您需要将[@collapse]="collapsed" 移动到div#detailsid，因为您正在尝试为该元素设置动画，而不是span#user 触发器/图标/按钮。同时删除[hidden]="isShow"，因为可见性/高度由应用height 和visibility 的动画处理：

<div id="detailsid" [@collapse]="collapsed">
  <!-- your stuff -->
</div>

最后，您需要更新您的 CSS 以拥有 div#detailsid 以拥有 overflow: hidden;

#detailsid {
  overflow: hidden;
}

这是一个example，大部分时间都在工作。

【讨论】：