Góc 2 Hoạt hình đáng kinh ngạc

Question

Góc 2 RC2 vừa mới xuất hiện và tôi tự hỏi liệu nó có hỗ trợ các hoạt ảnh so le cho *ngFor không? Tài liệu ngôn ngữ DSL đề cập đến group và sequence nhưng không có bất kỳ hình thức nào?

Hoạt ảnh so le không được bao gồm trong RC2?

Answer 1

Họ đang làm việc trên nó, như chúng ta có thể thấy ở đây: https://www.youtube.com/watch?v=Hr4IKlr9mhg&feature=youtu.be&t=10m50s

Nhưng tôi nghĩ rằng nó không được phát hành chưa ... Chúng ta cần phải chờ đợi thêm một chút :-(

Ở đây có các ví dụ mà chúng tôi thấy trong video ... nhưng tôi không biết đây có phải là phiên bản ổn định hay không ... có nguy cơ của riêng bạn https://github.com/matsko/ng-conf-demos

Answer 2

Tôi không chắc chắn liệu tôi có đồng ý với Günter không Các tính năng conf nằm trong bản RC.3 mới nhất hoặc cho vấn đề đó trong bản phát hành RC.4. nt nhưng như hiện tại mà không giống như nó dự kiến ​​cho RC.5. Nó chắc chắn sẽ nằm trong bản phát hành Angular 2 Final như bạn có thể thấy trên hoạt hình này theo dõi ticket. Với điều đó đang được nói mặc dù tôi đã tạo ra một giải pháp cho ứng dụng của tôi, tôi sẽ sẵn sàng chia sẻ. Có thể có cách tiếp cận dễ dàng hơn nhưng điều này hoạt động:

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

Như tôi đã nói có thể không phải là cách đơn giản nhất nhưng nó hoạt động cho tôi. Hy vọng nó sẽ giúp bạn!

* NGUỒN HỖ TRỢ: What is the JavaScript version of sleep()?