vue.js - условный рендеринг после изменения переменной

Question

Я пытаюсь отобразить новый элемент, как только логическое значение (waiting) изменится на true. Однако я понял, что как только мой код выходит из одного оператора v-if, я не могу перейти к другому оператору v-if. Поскольку логическое значение не изменяется до тех пор, пока не будет выполнено первое v-if, каков будет лучший способ перехода ко второму v-if после завершения первого? Я не могу добавить код, чтобы он находился там, потому что переход зависит от ввода.

Я думал о перенаправлении на другую страницу, но я хотел бы сохранить свои переменные в одном месте.

<template>
  <transition name="fade">
    <div class="home" v-if="!secondplayer">
      <div class="inner">
        <img class="responsive" src="/static/mask.png" alt="Responsive image" />
        <h1>How well do you understand the lyrics in Hamilton?</h1>
        <br />
        <p>Invite a second player by sending them this link: <u>{{url}}</u>.</p>
      </div>
    </div>
    <div class="play" v-if="secondplayer">
      <div v-if="!waiting">
        <div class="container hamilton--header--text">
          <h1><i>Test your understanding of Hamilton lyrics</i></h1>

          <div class="columns hamilton--inner">
            <div class="column is-half left">
              <p class="title">Player 1</p>
              <p class="subtitle">Score: {{playerdata.one.score}}</p>
            </div>
            <div v-if="secondplayer" class="column is-half right">
              <p class="title">Player 2</p>
              <p class="subtitle">Score: {{playerdata.two.score}}</p>
            </div>
          </div>

          <div class="hamilton--lyrics--text">
            <p>{{question.lyric}}
            </p>
            <div class="hamilton--answers">
              <a v-bind:class="{ 'wronganswer': hasAnswered && !item.correct, 'correctanswer': hasAnswered && item.correct}" @click="checkAnswer(item)" v-for="(item, index) in options">{{item.name}}</a>
            </div>
          </div>
        </div>
      </div>
      <div v-if="waiting">
        <div class="container">
          <h1>Waiting for the other player to finish...</h1>
          <img src="/static/Spinner.gif">
        </div>
      </div>
    </div> 
    <div class="gameOver" v-if="winMessage">
      <div>
        <div class="container">
          <h1>{{winMessage}}</h1>
          <vue-simple-spinner size="big" message="Loading..."></vue-simple-spinner>
        </div>
      </div>
    </div>
  </transition>
</template>

Answer 1

Вам нужно применить переход css:

Пример:

.fade-enter-active { /* <<transition name>>-<<transition class>> */
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

Смотрите переходные классы для более подробной информации.