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

我没有测试过，如果您有问题请在这里发表评论

Angular 2：* ngFor中的动画数据？

1 个答案: