Я хочу создать элемент, подобный карусели, где при нажатии следующего пользователя переходит к следующему вопросу после проверки текущего ввода и того же при нажатии предыдущей. При последнем вопросе форма представляется и выводится вывод.Угловой 2: Анимация данных в * ngFor?
Анимация должна быть типа ease-in/ease-out. Каждый вопрос упрощается - справа и по щелчку следующего, текущий вопрос ослабевает от левого и одновременно следующий вопрос облегчается - справа. Вопросы находятся в массиве.
Отредактировано:
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];
}
}
В чем проблема? Что вы пробовали? Где вы потерпели неудачу? Пожалуйста, добавьте код в свой вопрос, который демонстрирует, что вы пытаетесь выполнить и что вы пробовали. –
Я добавил код, но я действительно сомневаюсь, что это правильно. –