Question

我有一个问题，我不知道为什么转换不适用于mode="out-in"

＆＃13;

const app = new Vue({
  el: '#app',
  data() {
    return {
      step: 1,
      registration: {
        postCode: null,
        companyOrPrivate: null,
        companyName: null,
        name: null,
        email: null,
        phone: null,
        street: null,
        address: null,
        city: null,
        skipLicense: null,
        state: null,
        numtickets: 0,
        shirtsize: 'XL'
      }
    }
  },
  methods: {
    prev() {
      this.step--;
    },
    next() {
      this.step++;
    },
    submit() {
      alert('Submit.');
    }
  }
});

＆＃13;

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

{
  opacity: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <div class="container registration_form">
    <div class="row">
      <div class="col-8">
        <form>
          <transition name="fade" mode="out-in" appear>
            <div v-if="step === 1">
              <h1>Złóż zamówienie online - minimum formalności</h1>
              <div class="row">
                <div class="col-md-6 col-12">
                  <div class="form-group">
                    <label for="postCode">Wpisz kod pocztowy</label>
                    <input class="form-control" id="postCode" aria-describedby="postCode" v-model="registration.postCode">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="companyControll" name="radioCompanyOrPrivate" value="firma" v-model="registration.companyOrPrivate" required>
                    <label class="custom-control-label" for="companyControll">firma</label>
                  </div>
                  <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="privateControll" name="radioCompanyOrPrivate" value="osoba prywatna" v-model="registration.companyOrPrivate" required>
                    <label class="custom-control-label" for="privateControll">osoba prywatna</label>
                  </div>
                </div>
              </div>

              <button @click.prevent="next()">Next</button>
            </div>
          </transition>
          <transition name="fade" mode="out-in" appear>
            <div v-if="step === 2">
              <h1>Step Two</h1>
              <p>
                <legend for="street">Your Street:</legend>
                <input id="street" name="street" v-model="registration.street">
              </p>

              <p>
                <legend for="city">Your City:</legend>
                <input id="city" name="city" v-model="registration.city">
              </p>

              <p>
                <legend for="state">Your State:</legend>
                <input id="state" name="state" v-model="registration.state">
              </p>

              <button @click.prevent="prev()">Previous</button>
              <button @click.prevent="next()">Next</button>

            </div>
          </transition>
          <transition name="fade" mode="out-in" appear>
            <div v-if="step === 3">
              <h1>Step Three</h1>

              <p>
                <legend for="numtickets">Number of Tickets:</legend>
                <input id="numtickets" name="numtickets" type="number" v-model="registration.numtickets">
              </p>

              <p>
                <legend for="shirtsize">Shirt Size:</legend>
                <select id="shirtsize" name="shirtsize" v-model="registration.shirtsize">
                  <option value="S">Small</option>
                  <option value="M">Medium</option>
                  <option value="L">Large</option>
                  <option value="XL">X-Large</option>
                </select>
              </p>

              <button @click.prevent="prev()">Previous</button>
              <button @click.prevent="submit()">Save</button>

            </div>
          </transition>
        </form>

        <br/><br/>Debug: {{registration}} {{ step }}
      </div>

    </div>
  </div>
</div>

＆＃13;

Here is my code on codepen

Answer 1

你想要这样的东西https://codepen.io/ittus/pen/WJVoVV吗？

您需要将所有3个组件放在1个转换中，并为每个元素提供一个键

<transition name="fade" mode="out-in" appear>
  <div v-if="step === 1" key="step1">
  </div>
  <div v-if="step === 2" key="step2">
  </div>
  <div v-if="step === 2" key="step3">
  </div>
</transition>

vue2过渡模式in-ou

1 个答案: