更多/更少分页角度的动画

Question

我正在遵循一个很好的教程来创建一个可扩展的列表，以显示更多或更少的有角度的元素（这里是教程http://www.angulartutorial.net/2017/09/angular-show-moreless-pagination.html）。它运行良好，但我想知道当 div 展开或折叠时是否可以添加和动画。我尝试在最大高度中添加一个带有过渡的类，但它不起作用。这是代码

@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);

.expand-panel 只是

.expand-panel {
  -webkit-transition: max-height 1s ease-in;
   transition: max-height 1s ease-in;
}

过渡它不以这种方式工作。

https://jsfiddle.net/sc5fx7pL/

Answer 1

您可以在此处使用 Angular 动画示例：stackblitz

这里是创建动画的步骤：

1) 添加文件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) 在此处更新您的应用模块以添加动画模块

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

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

3) 从动画文件中导入动画，如：

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) 最后实现模板元素的动画，如下所示：

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