Animation in more/less pagination angular

Question

I was following a good tutorial to create an expandable list to show more or less elements with angular (here's the tutorial http://www.angulartutorial.net/2017/09/angular-show-moreless-pagination.html). It's working well but I was wondering if it's possible add and animation when the div expands or collapses. I tried just adding a class with a transition in the max-height but it's not working. Here's the 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";
    this.list = [
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Sam',age:'25'},
      {name:'Rocky',age:'35'},
      {name:'Major',age:'40'},
      {name:'Kian',age:'40'},
      {name:'Karan',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'}
    ]
    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 it's not working in this way.

https://jsfiddle.net/sc5fx7pL/

Answer 1

You can use Angular animation here the example: stackblitz

Here the step for creating an animation:

1) add a file listAnimation.ts

import {
    state,
    animate,
    transition,
    query,
    group,
    style,
    trigger,
    stagger,
    keyframes
} from "@angular/animations";

export const ListAnimation =
    trigger('ListAnimation', [

        transition('* => *', [ 
           query(':enter',style({opacity: 0}), {optional: true }),

           query(':enter', stagger('100ms',[
            animate('1s ease-in', keyframes([
                style({opacity:0, transform:'translateY(-100px)', offset: 0}),
                style({opacity:0.3, transform:'translateY(50px)', offset: .3}),
                style({opacity:1, transform:'translateY(0)', offset: 1}),
            ]))
           ]), { optional: true }),

           query(':leave', stagger('100ms',[
            animate('1s ease-in', keyframes([
                style({ 
                    opacity: 1, 
                    transform: 'translateY(0) scale(1)',
                    offset: 0
                }),
                style({
                    opacity: 0.5,
                    transform: 'translateY(50px)  scale(1.2)',
                    offset: .01
                }),
                style({
                    opacity: .3,
                    transform: 'translateY(-50px)  scale(1.5)',
                    offset: 1
                })
            ]))
           ]), { optional: true })

        ])
    ]);

2) update your app module here for add animation module

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

  imports:      [ 
    BrowserModule, 
    FormsModule, BrowserAnimationsModule ],
.............
..........

3) import animation from animation file like as:

import { Component } from '@angular/core';
import { ListAnimation } from './listAnimation.ts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations:[ListAnimation]
})
export class AppComponent  {
  name = 'Angular';
  showitem=false;
  Listitems=['item 1','item 2','item 3','item 4','item 5','item 6','item 7'];

  showToggle() {
    this.showitem= this.showitem ? false:true;
  }

  deleteItem(i) {
    this.Listitems.splice(i,1);
  }
}

4) finally implement animation your template elements like as:

<button (click)='showToggle()'>show item</button>
<ul [@ListAnimation]="Listitems.length" *ngIf="showitem" class="text-left mt-2">
    <li *ngFor="let item of Listitems; let i=index">{{item}} {{i+1}} <span (click)="deleteItem(i)">&#x274C;</span></li>
</ul>