Angular 2：在* ngFor中動畫數據？

Question

我想創建一個類似元素的輪播，點擊下一個用戶在驗證當前輸入後點擊下一個問題，點擊之前的點擊。在最後一個問題中，表單被提交併顯示輸出。

動畫必須是緩入/緩出類型。每個問題從右向右輕鬆點擊，當前問題從左側緩解，同時下一個問題從右側緩解。問題在數組中。

被修改：

HTML：

   <div [@questionAnimation]="orientation"> 
        {{selectedQuestion.statement}}<br/> 
        {{selectedQuestion.helperText}} 
        <md-input [(ngModel)]="selectedQuestion.answer" type="{{selectedQuestion.type}}" 
           maxlength="{{selectedQuestion.maxLength}}" 
           min="{{selectedQuestion.min}}" max="{{selectedQuestion.max}}" 
           (keydown)="nextOnEnter($event)" required> 
         <span md-prefix [innerHTML]="selectedQuestion.prefix"></span> 
         <span md-suffix [innerHTML]="selectedQuestion.suffix"></span> 
        </md-input> 
       </div> 

       <button md-button (click)="prev()">Previous</button> 
       <button md-button (click)="next()">Next</button> 

動畫：

animations: [ 
     trigger('questionAnimation', [ 
      state('next', style({transform: 'translateX(0)', opacity: 1.0})), 
      state('prev', style({transform: 'translateX(0)', opacity: 1.0})), 
      transition('next => prev', style({transform: 'translateX(-100%)', opacity: 1.0}), animate('300ms')), 
      transition('* => next', style({transform: 'translateX(-100%)', opacity: 0.0}), animate('900ms')) 
     ]) 
    ] 

導航代碼：

next() { 
     this.orientation = 'next'; 
     let index = this.questions.indexOf(this.selectedQuestion); 
     if (this.questions[index + 1]) { 
      this.selectedQuestion = this.questions[index + 1]; 
     } else { 
      this.calculate(); 
     } 
    } 

    prev() { 
     this.orientation = 'prev'; 
     let index = this.questions.indexOf(this.selectedQuestion); 
     if (this.questions[index - 1]) { 
      this.selectedQuestion = this.questions[index - 1]; 
     } else { 
      this.selectedQuestion = this.questions[0]; 
     } 
    } 

Answer 1

HTML

<ng-container *ngIf="questions && questions.length > 0"> 
    <div *ngFor="let question of questions" [@questionAnimation]="question.animationState"> 
     {{question.statement}}<br/> 
     {{question.helperText}} 
     <md-input [(ngModel)]="question.answer" type="{{question.type}}" 
        maxlength="{{question.maxLength}}" 
        min="{{question.min}}" max="{{question.max}}" 
        (keydown)="nextOnEnter($event)" required> 
      <span md-prefix [innerHTML]="question.prefix"></span> 
      <span md-suffix [innerHTML]="question.suffix"></span> 
     </md-input> 
    </div> 

    <button md-button (click)="changeQuestion('prev')" *ngIf="currentQuestionIndex > 0">Previous</button> 
    <button md-button (click)="changeQuestion('next')" *ngIf="currentQuestionIndex < (questions.length - 1)">Next</button> 
</ng-container> 

動畫

animations: [ 
     trigger('questionAnimation', [ 
     state('in', style({ opacity: 1, transform: 'translateX(0)' })), 
     state('out', style({ display: 'none' })), 
     state('prevInactive', style({ display: 'none', opacity: 0 })), 
     state('nextInactive', style({ display: 'none', opacity: 0 })), 
     state('prevActive', style({ opacity: 1, transform: 'translateX(0)' })), 
     state('nextActive', style({ opacity: 1, transform: 'translateX(0)' })), 
     transition('* => prevActive', [ 
      style({ transform: 'translateX(-100%)', opacity: 1 }), 
      animate('0.4s', style({ transform: 'translateX(0)', opacity: 1 })) 
     ]), 
     transition('* => nextActive', [ 
      style({ transform: 'translateX(100%)', opacity: 1 }), 
      animate('0.4s', style({ transform: 'translateX(0)', opacity: 1 })) 
     ]), 
     transition('* => prevInactive', [ 
      style({ transform: 'translateX(0%)', opacity: 1 }), 
      animate('0.4s', style({ transform: 'translateX(100%)', opacity: 0 })) 
     ]), 
     transition('* => nextInactive', [ 
      style({ transform: 'translateX(0%)', opacity: 1 }), 
      animate('0.4s', style({ transform: 'translateX(-100%)', opacity: 0 })) 
     ]) 
     ]) 
] 

組件

private currentQuestionIndex: number; 
    private questions: Question[]; 

    ngOnInit() { 
     this.currentQuestionIndex = 0; 
     this.questions = this.addAnimationState(questionsData, 0); 
    } 


    changeQuestion(direction: string) { 
     this.questions[this.currentQuestionIndex].animationState = direction + 'Inactive'; 
     if (direction == 'next') { 
     this.currentQuestionIndex++; 
     if (this.currentQuestionIndex >= this.questions.length) { 
      this.currentQuestionIndex = 0; 
     } 
     } else { 
     this.currentQuestionIndex--; 
     if (this.currentQuestionIndex < 0) { 
      this.currentQuestionIndex = this.questions.length - 1; 
     } 
     } 
     this.questions[this.currentQuestionIndex].animationState = direction + 'Active'; 
    } 


    private addAnimationState(questionsData: Question[], index: number) { 
     if(questionsData) { 
     if(index >= questionsData.length) { 
      index = questionsData.length - 1; 
     } 
     for (let i = 0; i < questionsData.length; i++) { 
      if (i == index) { 
      questionsData[i].animationState = 'in'; 
      } else { 
      questionsData[i].animationState = 'out'; 
      } 
     } 
     this.currentQuestionIndex = index; 
     } else { 
     questionsData = []; 
     this.currentQuestionIndex = 0; 
     } 
     return questionsData; 
    } 

我沒有測試它，如果你有問題，請在這裏評論