Angular 2 animate *ngFor 在 RC 5 中使用新的动画支持一个接一个地列出项目答案

【问题标题】：Angular 2 animate *ngFor list item one after other using new Animation support in RC 5Angular 2 animate *ngFor 在 RC 5 中使用新的动画支持一个接一个地列出项目
【发布时间】：2016-06-28 20:36:43
【问题描述】：

我有一个组件从服务器获取项目列表，然后在模板中使用 *ngFor 显示该列表。

我希望列表显示一些动画，但一个接一个。我的意思是每个列表项都应该一个接一个地动画。

我正在尝试这样的事情：

import { Component, Input, trigger, state, animate, transition, style } from '@angular/core';

@Component({
    selector: 'list-item',
    template: ` <li  @flyInOut="'in'">{{item}}</li>`,
    animations: [
        trigger('flyInOut', [
            state('in', style({ transform: 'translateX(0)' })),
            transition('void => *', [
                style({ transform: 'translateX(-100%)' }),
                animate(100)
            ]),
            transition('* => void', [
                animate(100, style({ transform: 'translateX(100%)' }))
            ])
        ])
    ]
})
export class ListItemComponent {
    @Input() item: any;
}

在我的列表组件模板中，我正在使用它：

<ul>
    <li *ngFor="let item of list;">
     <list-item [item]="item"></list-item>
    </li>
</ul>

它的作用是一次显示整个列表。我希望项目通过一些动画一个一个地进入。

【问题讨论】：

对我来说完全一样的行为！你找到解决办法了吗？
还没有，但似乎有了 Angular 2 中的新动画模块，现在应该不难了。我们可以为列表项创建一个组件，然后附加进入和离开的动画。检查angular.io/docs/ts/latest/guide/animations.html
我看到了，谢谢！我的解决方案是在动画的每个元素之间设置一个超时时间，这样所有 LI 元素都可以通过动画顺利进入
看看stackoverflow.com/questions/37880525/…。交错尚未实现。

标签： angular typescript angular2-template angular2-services

【解决方案1】：

我在文档中找不到对ngFor 的stagger 支持，但是现在有animation.done events，可以用来制作staggering ngFor

StackBlitz

@Component({
  selector: 'my-app',
  template: `
    <ul>
    <li *ngFor="let hero of staggeringHeroes; let i = index"
        (@flyInOut.done)="doNext()"
        [@flyInOut]="'in'" (click)="removeMe(i)">
      {{hero}}
    </li>
  </ul>
  `,
  animations: [
  trigger('flyInOut', [
    state('in', style({transform: 'translateX(0)'})),
    transition('void => *', [
      animate(300, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]))
    ]),
    transition('* => void', [
      animate(300, keyframes([
        style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
        style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
        style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
      ]))
    ])
  ])
]
})
export class App {
  heroes: any[] = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India'];

  next: number = 0;
  staggeringHeroes: any[] = [];

  constructor(){
    this.doNext();
  }

  doNext() {
    if(this.next < this.heroes.length) {
      this.staggeringHeroes.push(this.heroes[this.next++]);
    }
  }

  removeMe(i) {
    this.staggeringHeroes.splice(i, 1);
  }
}

【讨论】：

在您的情况下，您有一个静态区域，但是当数组更改时我们可以做什么？
是否可以使用自定义转场stateChangeExpression 实现相同的转场效果 - 除了void => * (:entry) / * => void (:leave) for *ngFor ？例如定义transition('in',... 和transition('out',... 并在模板中使用[@flyInOut]="transition" 并绑定到组件类中的transition 变量？我问是因为 *ngFor 进行了 DOM 添加和删除，而我没有成功通过自定义转换来实现。
如果你能用其他东西更新 plunker 那就太好了，我认为 stackblitz 是一个很好的！

【解决方案2】：

为了使用 angular2 动画，我为迭代项设置了一个 state 属性，然后为 mouseover 和 mouseout 函数设置了一个切换函数。这样每个项目都封装了它的动画状态，然后我可以根据需要更改它

<li
   *ngFor="let item of itemsList"
   (mouseover)="toogleAnimation(item)"
   (mouseout)="toogleAnimation(item)"
>{{ item.name }}
  <div class="animation_wrapper" [@slideInOut]="item.state">
    <span class="glyphicon glyphicon-refresh"></span>
    <span class="glyphicon glyphicon-trash"></span>
  </div>
</li>

【讨论】：

在您的示例中 slideInOut 应该是 flyInOut 吗？
如果您在前面的帖子中指的是 flyInOut，我想您可能会说它应该是这样，但这是我代码中的一个文字示例。请记住，只要您正确调用它们，您可以为触发器名称命名任何您想要的名称
是的，确实（几乎）任何东西都可以命名触发器。只是想看看您的答案如何与 OP 的问题相匹配。谢谢，新年快乐！

【解决方案3】：

您想要什么，列表中每个项目之间的时间，请参阅此代码。将文件 .css 更改为 .scss

喜欢这个https://codepen.io/jhenriquez856/pen/baPagq

$total-items: 5;

body {
  font-family: sans-serif;
  background: #111;
  color: #fff;
}

ul {
  width: 300px;
  left: 50%;
  margin-top: 25px;
  margin-left: -150px;
  
  position: absolute;
}

li {
  position: relative;
  display: block;
  border: 1px solid hotpink;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  animation: fadeIn 0.5s linear;
  animation-fill-mode: both;
}

// Set delay per List Item
@for $i from 1 through $total-items {
  li:nth-child(#{$i}) {
    animation-delay: .25s * $i;
  }
}

// Keyframe animation
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

【讨论】：