각도 2 비틀 거리는 애니메이션

Question

각도 2 RC2가 방금 나왔습니다. 이미 *ngFor에 대해 시차 애니메이션을 지원하는지 궁금합니다. DSL 언어 문서에는 group과 sequence이 있지만 종류의 비틀기는 없습니까?

비틀 거리는 애니메이션이 RC2에 포함되어 있지 않습니까?

Answer 1

우리가 여기서 볼 수 있듯이 그들은 그것에 노력하고 있습니다 : https://www.youtube.com/watch?v=Hr4IKlr9mhg&feature=youtu.be&t=10m50s

을하지만 그것은 출시되지 않은 생각하지만 ... 우리는 여기에있다

:-(좀 더 기다릴 필요 우리는 비디오에서 볼 수 ...하지만 이것은 안정 버전 인 경우 몰라요 ... 당신의 자신의 위험에 예 https://github.com/matsko/ng-conf-demos

Answer 2

나는 내가 ng-는 것을 귄터에 동의하는지 모르겠어요 conf의 기능은 최신 RC.3에 있거나 RC.4 릴리스에서 중요합니다. 비틀 거리는 기능은 탁월합니다. 현재로서는 RC.5에서 예정된 것처럼 보이지 않습니다. 이 애니메이션 추적 ticket에서 볼 수 있듯이 확실히 Angular 2 Final 버전에 있습니다. 그게 내 응용 프로그램에 대한 해결 방법을 만들었지 만 공유하고 싶습니다. 이 쉽게 접근 할 수 있지만이 작동 될 수 있습니다

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

나는 어쩌면 가장 간단한 방법은 아니다 말했듯하지만 나를 위해 작동합니다. 희망이 당신을 돕는다!

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