css - 更多/更少分页 Angular 动画

Question

我正在按照一个很好的教程创建一个可扩展列表以显示更多或更少的 Angular 元素(这里是教程 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>