Winkel 2 animieren *ngFor Punkt der Liste eine nach der anderen mit neuen Animation, die Unterstützung im RC-5

Ich habe eine Komponente, die holt Liste von Elementen vom server und zeigt dann, dass die Liste mit *ngFor im template.

Möchte ich die Liste angezeigt werden mit etwas animation, aber eins nach dem anderen. Ich meine, jeder Punkt der Liste sollte animieren, nach anderen.

Ich versuche, so etwas wie dieses:

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

und in meiner Liste component template ich benutze es gerne:

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

Was es tut, ist, zeigt die gesamte Liste auf einmal. Ich möchte Elemente geben Sie nacheinander mit einigen animation.

Genau dieses Verhalten erwartet, für mich ! Haben Sie eine Lösung finden ?
Noch nicht, aber es scheint, dass mit dem neuen Animations-Modul im Winkel 2, es sollte nicht viel schwieriger jetzt. Wir können eine Komponente erstellen, die für Punkt der Liste und dann mit der animation für die auf betreten und verlassen. Check angular.io/docs/ts/latest/guide/animations.html
Ich habe gesehen, danke ! Meine Lösung war, ein timeout zwischen jedem element für die animation, also alle LI-element eingibt, glatt mit einer animation
Haben Sie einen Blick auf stackoverflow.com/questions/37880525/.... Atemberaubend ist noch nicht implementiert.

InformationsquelleAutor Naveed Ahmed | 2016-06-28

Konnte ich nicht finden stagger Unterstützung auf ngFor in der Dokumentation, aber
es gibt jetzt animation.done events, die verwendet werden können, um staggering ngFor

siehe@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);
  }
}

In Ihrem Fall haben Sie einen statischen Bereich, aber was wir tun können, wenn das array ändern ?
Ist es möglich, zur Erreichung des gleichen übergangs-Effekt mit benutzerdefinierten übergang stateChangeExpression - andere als void => * (:entry) / * => void (:leave) für *ngFor? Zum Beispiel definieren transition('in',... und transition('out',... und in Vorlage verwenden [@flyInOut]="transition" mit Bindung an transition variable in der Komponenten-Klasse?. Ich Frage, weil *ngFor macht DOM hinzufügen und entfernen und ich nicht erfolgreich zu erreichen, die mit benutzerdefinierten übergängen.
Es wäre schön, wenn Sie aktualisieren die plunker mit etwas anderes, ich glaube, stackblitz ist ein guter!

InformationsquelleAutor Ankit Singh

1

Verwenden angular2 Animationen habe ich ein state-Eigenschaft der iterierten Element und dann einfach das setup eine toggle-Funktion für die mouseover-und mouseout-Funktionen. Auf diese Weise wird jedes Element gekapselt, es ist animiert Staat und dann könnte ich es ändern, wie gebraucht
```
<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>
```
- Ist slideInOut soll flyInOut in deinem Beispiel?
- Wenn Sie beziehen sich auf die flyInOut in der früheren Beiträge, ich denke, man könnte sagen, es soll so sein, aber das ist eine wörtliche Beispiel aus meinem code. Denken Sie daran, Sie können den Namen trigger-Namen, die alles, was Sie wollen, solange Sie Sie richtig
- Ja, in der Tat zu benennen löst (fast) alles. Wollte nur sehen, wie Ihre Antwort entsprach bis auf die OP ' s Frage. Vielen Dank und frohes neues Jahr!
InformationsquelleAutor jredd

was Sie wollen, von der Zeit, die zwischen jedes Element in der Liste finden Sie unter diesem code. ändern Sie die Datei .css .scss

wie diese https://codepen.io/jhenriquez856/pen/baPagq

CSS:

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

HTML:

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

InformationsquelleAutor Jhonnathan Henriquez

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.