I found a helpful tutorial on creating an expandable list using Angular. It's working fine, but I wanted to add an animation when the div expands or collapses. I tried adding a class with a transition in the max-height property, but it didn't work as expected. Here's my code:
@Component({
selector: 'my-app',
template: `
<div>
<h3> {{title}}</h3>
<div class="expand-panel2">
<ul class="list">
<li *ngFor="let l of list | slice : startPage:paginationLimit">
{{l.name}} ({{l.age}})
</li>
</ul>
<button *ngIf ="paginationLimit < list.length" (click)="showMoreItems()">
Show More
</button>
<button *ngIf ="paginationLimit > 3" (click)="showLessItems()">
Show Less
</button>
</div>
</div>
`,
})
class HomeComponent {
title:String;
list:any;
startPage : Number;
paginationLimit:Number;
constructor(){
this.title = "Angular: Show more/show less pagination";
// List data goes here...
this.startPage = 0;
this.paginationLimit = 3;
}
showMoreItems()
{
this.paginationLimit = Number(this.paginationLimit) + 3;
}
showLessItems()
{
this.paginationLimit = Number(this.paginationLimit) - 3;
}
}
const { BrowserModule } = ng.platformBrowser;
@NgModule({
imports: [ BrowserModule ],
declarations: [ HomeComponent ],
bootstrap: [ HomeComponent ]
})
class AppModule { }
const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);
where .expand-panel is simply
.expand-panel {
-webkit-transition: max-height 1s ease-in;
transition: max-height 1s ease-in;
}
The transition doesn't seem to be working properly.