CODEWITHSUNDEEP
angularangular-animations
user11319956
user11319956

Reputation:

How do I give animation in Angular

I am trying to create an application where I want to give Angular animation to a span. I took reference from this example StackBlitz Example I tried to create my own span after that. I have created a MyStackBlitz here to provide an example what I am doing.

As shown in example, I want to add collapse animation to that span.

I have tried doing that from the reference example I have provided, but I am stuck at a point where I dont know what I am doing wrong.

Upvotes: 1

Views: 107

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38847

To get it closer to the example you are trying to copy you would need to do the following.

First you would need to import BrowserAnimationsModule to your module:

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 {}

Next you would need to move your [@collapse]="collapsed" to the div#detailsid as you are trying to animate that element, not span#user trigger/icon/button. Also remove [hidden]="isShow" as the visibility/height is handled by the animations applying height and visibility:

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

Finally you will need to update your CSS to have div#detailsid to have overflow: hidden;

#detailsid {
  overflow: hidden;
}

Here is an example mostly working.

Upvotes: 1

Related Questions