如何在 Angular 中提供动画

Question

我正在尝试创建一个应用程序，我想在其中为 span 提供 Angular 动画。我参考了这个例子 StackBlitz Example I tried to create my own span after that. I have created a MyStackBlitz 来提供一个我正在做的例子。

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

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

Answer 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 trigger/icon/button。同时删除 [hidden]="isShow"，因为 visibility/height 由应用 height 和 visibility:

的动画处理

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

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

#detailsid {
  overflow: hidden;
}

这是一个 example 大部分工作。

如何在 Angular 中提供动画

How do I give animation in Angular

angular

angular-animations