web-dev-qa-db-fra.com

Angular 2 animate * ngPour élément de liste les uns après les autres en utilisant le nouveau support Animation dans RC 5

J'ai un composant qui récupère la liste d'éléments du serveur, puis l'affiche à l'aide de * ngFor dans le modèle.

Je veux que la liste soit affichée avec une animation, mais l'une après l'autre. Je veux dire que chaque élément de la liste doit s'animer après l'autre.

J'essaie quelque chose comme ça:

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

et dans mon modèle de composant de liste, je l'utilise comme:

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

Ce qu'il fait est affiche la liste entière à la fois. Je veux que les articles entrent un par un avec une animation.

angulartypescriptangular2-templateangular2-services
19
Naveed Ahmed

Je ne pouvais pas trouver le support stagger sur ngFor dans la documentation, mais Il y a maintenant animation.doneevents, qui peut être utilisé pour créer staggering ngFor

see @ PLUNKER

@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);
  }
}
14
Ankit Singh

Pour utiliser les animations angular2, j'ai défini une propriété state sur l'élément itéré, puis une configuration bascule pour les fonctions mouseover et mouseout. De cette façon, chaque élément encapsulé est dans son état animé et je peux le changer au besoin.

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

ce que vous voulez, du temps entre chaque élément de la liste, voyez ce code. changer le fichier .css en .scss

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

0
Jhonnathan Henriquez