Question

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

我想对此列表进行动画处理，以便在单击类别时每个列表项从+ 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%)' }))
          ])
        ])
      ])
    ])

第一次单击类别时，动画会按预期工作，但单击其他类别根本不起作用

Answer 1

我认为您需要告诉组件何时重新设置元素动画。因为触发器设置为列表元素（而不是列表项），所以除了第一次（：载入时输入）之外，这些项都不会得到动画处理。

看看动画的角度example page。我认为过滤器/交错器解决了类似的问题。

Answer 2

我认为@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

当项目以角度6改变时，淡入和淡出列表项目

2 个答案: