时间戳

首页 > 解决方案 > 当项目以角度 6 变化时淡入和淡出列表项目

angular - 当项目以角度 6 变化时淡入和淡出列表项目

问题描述

我有一个由类别列表控制的产品列表，因此当单击一个类别时，它会显示其中的所有产品

我想为这个列表设置动画，这样当点击类别时，每个列表项都会从 +50% 淡化到 0 交错

如果单击不同的类别，我希望当前产品列表再次淡出，但这次从 0 到 -50% 交错，然后新项目从 +50% 到 0 交错

我目前有这个

<ul @listInOut>
 <li *ngFor="let product of products;">
   //item
 </li>
<ul>

    trigger('listInOut', [
      transition(':enter', [
        query('li', [
          style({ opacity: 0, transform: 'translateY(50%)' }),
          stagger(100, [
            animate('1s ease', style({ opacity: 1, transform: 'translateY(0)' }))
          ])
        ])
      ]),
      transition(':leave', [
        query('li', [
          style({ opacity: 1, transform: 'translateY(0)' }),
          stagger(100, [
            animate('.5s ease', style({ opacity: 0, transform: 'translateY(-50%)' }))
          ])
        ])
      ])
    ])

第一次单击该类别时，动画可以正常工作，但单击其他​​类别根本不起作用

标签： angularangular-animations

解决方案

我认为@listInOut必须在包含*ngFor循环的标签上。我试过把你的动画放在这样的组件中，它可以工作：

结果

例子

下面是代码：

HTML

<div @listInOut *ngFor="let item of list" class="item">
  <ul>
    <li>{{ item }}</li>
  </ul>
</div>

<button (click)="addItem()">Add Item</button>

app.component.ts

import { Component } from '@angular/core';
import { trigger,query, transition, style, stagger, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('listInOut', [
      transition(':enter', [
        query('li', [
          style({ opacity: 0, transform: 'translateY(50%)' }),
          stagger(100, [
            animate('1s ease', style({ opacity: 1, transform: 'translateY(0)' }))
          ])
        ])
      ]),
      transition(':leave', [
        query('li', [
          style({ opacity: 1, transform: 'translateY(0)' }),
          stagger(100, [
            animate('.5s ease', style({ opacity: 0, transform: 'translateY(-50%)' }))
          ])
        ])
      ])
    ])],
})
export class AppComponent {
  list: string[] = [];

  constructor() {}

  addItem() {
    this.list.push('item')
  }
}

请记住还要导入以下模块客栈app.modules.ts：BrowserAnimationsModule

推荐阅读