Angular 2 Staggering Animation

Question

Angular 2 RC2 właśnie wyszedł i zastanawiam się, czy obsługuje on już animacje z przesunięciem dla *ngFor? Dokumentacja języka DSL wymienia group i sequence, ale nie ma żadnego rodzaju zataczania się?

Czy animacja z przesunięciem nie jest zawarta w RC2?

Answer 1

Oni pracują nad tym, jak możemy zobaczyć tutaj: https://www.youtube.com/watch?v=Hr4IKlr9mhg&feature=youtu.be&t=10m50s

Ale myślę, że nie została wydana jeszcze ... Musimy poczekać trochę więcej :-(

Tu jest przykłady, które widzimy na filmie ... ale nie wiem, czy jest to stabilna wersja ... na własne ryzyko https://github.com/matsko/ng-conf-demos

Answer 2

Nie jestem pewien, czy zgadzam się z Günterem, że ng- Funkcje conf znajdują się w najnowszym RC.3 lub w tej kwestii w wydaniu RC.4 Funkcja "stagger" byłaby excelle nt, ale z prądem, który nie wygląda jak jest przeznaczony dla RC.5. Z pewnością będzie w wersji Angular 2 Final, jak widać na tym śledzeniu animacji ticket. Mając to na uwadze, chociaż utworzyłem obejście mojego wniosku, chętnie podzielę się tym tematem. Nie może być łatwiejszy podejście, ale to działa:

@Component({ 
    selector: 'child', 
    templateUrl: `<div @fadeIn="state">This is my content</div>`, 
    animations: [ 
     trigger('fadeIn', [ 
      state('inactive', style({opacity:0})), 
      state('active', style({opacity:1)})), 
      transition('inactive => active', [ 
       animate('500ms ease-in') 
      ]) 
     ]) 
    ] 
}) 
export class Child implements OnInit { 
    @Input() delay; 

    constructor() { 
     this.state = 'inactive'; 
    } 
    ngOnInit() { 
     this.sleep(this.delay).then(() => { 
      this.state = 'active'; 
     }; 
    } 
    // HELPER* 
    sleep(time) { 
     return new Promise((resolve) => setTimeout(resolve, time)); 
    } 
} 

@Component({ 
    selector: 'parent', 
    templateUrl: ` 
     <div *ngFor="let child of children"> 
      <child [delay]="child.delay"></child> 
     </div> 
    ` 
}) 
export class Child implements OnInit { 
    constructor() { 
     this.children = []; 
     this.children.push({ delay: 600 }); 
     this.children.push({ delay: 1200 }); 
    } 
} 

Jakbym nie powiedział, może to najprostszy sposób, ale to działa na mnie. Mam nadzieję, że to ci pomoże!

* POMAGIER: What is the JavaScript version of sleep()?