Angular анимация работает только на: войти без ошибок - PullRequest
Новая
       27

Angular анимация работает только на: войти без ошибок

0 голосов
/ 27 марта 2020

У меня проблема с angular анимациями. В настоящее время он работает только когда переход установлен на :enter, но работает, когда я переключаю значение свойства с true на false или наоборот. Я уже установил состояние и переходы, но он ничего не делает, и я не получаю никаких ошибок, поэтому я не знаю, что я делаю неправильно. Это мой код: 

import { Component, OnInit, Input, EventEmitter, Output } from "@angular/core";
import { Question } from "../models/question";
import {
  trigger,
  transition,
  state,
  style,
  animate
} from "@angular/animations";

@Component({
  selector: "app-question",
  templateUrl: "./question.component.html",
  styleUrls: ["./question.component.scss"],
  animations: [
    trigger("slideView", [
      state("true", style({ transform: "translateX(0)", opacity: 1 })),
      state("false", style({ transform: "translateX(100%)", opacity: 0 })),
      transition(
        "0 => 1",
        animate("500ms", style({ transform: "translateX(0)", opacity: 1 }))
      ),
      transition(
        "1 => 1",
        animate("500ms", style({ transform: "translateX(100%)", opacity: 0 }))
      ),
      transition(":enter", [
        style({ transform: "translateX(100%)", opacity: 0 }),
        animate(
          "600ms ease-in",
          style({ transform: "translateX(0%)", opacity: 1 })
        )
      ])
    ])
  ]
})
export class QuestionComponent implements OnInit {
  @Input() nextQuestion: Question;

  @Output() onNextQuestion = new EventEmitter<any>();

  @Output() onPreviousQuestion = new EventEmitter<any>();

  show = true;

  get stateName() {
    return this.show ? "show" : "hide";
  }

  toggle(evt): void {
    this.show = !this.show;
    console.log(this.show);
  }

  constructor() {}

  ngOnInit() {
    console.log(this.show);
  }

  goBack(event: Event) {
    this.show = false;
    this.onPreviousQuestion.emit(event);
  }

  selectAnswer(event: Event) {
    this.show = true;
    this.onNextQuestion.emit(event);
  }
}

my html: 

<div class="row" [@slideView]="stateName" #tref>
  <div class="col-md-10 col-lg-10 col-xxxl-6 offset-lg-1 offset-md-1">
    <nb-card class="list-card">
      <nb-card-header>
        {{ nextQuestion.questionTitle }}
      </nb-card-header>
      <nb-card-body>
        <nb-list [id]="nextQuestion.idQuestion">
          <nb-list-item
            *ngFor="let alternative of nextQuestion.alternatives | keyvalue"
            (click)="selectAnswer($event)"
            [id]="alternative.key"
          >
            {{ alternative.value }}
          </nb-list-item>
        </nb-list>
      </nb-card-body>
      <nb-card-footer
        ><button nbButton ghost status="warning" (click)="goBack($event)">
          Volver
        </button>
        <button nbButton ghost status="primary" class="float-right">
          Completar
        </button></nb-card-footer
      >
    </nb-card>
  </div>
</div>

<button nbButton ghost status="primary" class="float-right" (click)="toggle()">
  Completar
</button>

У меня есть эта кнопка переключения, чтобы играть с переходом, но она тоже не работает. Кстати, моя цель - заставить мое приложение работать , как это приложение викторины, когда оно переходит от вопроса к вопросу, но я не хочу использовать библиотеку, которую он использует там, потому что она обращается к DOM.

Спасибо за помощь!

...