javascript - 如何在 v-if 语句上显示转换

Question

我有一个包含 4 个字段的表单。仅当在其他字段之一选择某个值时才会显示其中 2 个字段。我想在幻灯片淡入淡出过渡中显示这些字段，但它似乎不适用于输入效果。不过，它确实对休假效果起作用。 这是我的代码:

<form @submit.prevent="preventSubmit">
          <label for="testName" class="form-label">Nom</label>
          <input type="text" id="testName" name="testName" v-model="testName" class="form-control" placeholder="Saisir le nom du test">
          <label for="testType" class="form-label">Type</label>
          <select name="testType" id="testType" class="form-select" v-model="testType">
              <option value="" selected hidden disabled>Choisir le type du test</option>
              <option value="CIBLE">Ciblé</option>
              <option value="COMPLET">Complet</option>
              <option value="PARTIEL">Partiel</option>
          </select>
          <transition name="slide-fade">
          <div v-if="testType === 'PARTIEL'">
            <label for="nbQuestions">Nombre de questions</label>
            <input type="number" class="form-control" id="nbQuestions" name="nbQuestions" v-model="nbQuestions" placeholder="Donner le nombre de questions">
            <label for="testStatut" class="form-label">Statut</label>
            <select class="form-select" id="testStatut" name="testStatut" @input="changeText">
                <option value="PRIVATE" selected="selected">Privé</option>
                <option value="PUBLIC">Publique</option>
            </select>
          </div>
          </transition>
        </form>

仅当 testType 为“PARTIEL”(如代码所示)时，才会显示这 2 个字段。 我还有一个包含组件状态的数据对象。

data(){
    return{
        dataModal : false,
        headers : ['ID','nom','description','nbQuestions','statut','type'],
        showModal : false,
        testStatut : '',
        nbQuestions : 0,
        testType :'',
        testName :'',
    }
},

这是我的 CSS :

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

我使用 Vuejs 文档进行此转换，并且实际上使用 Bootstrap 5 进行类

Answer 1

也许只是.slide-fade-enter-from而不是.slide-fade-enter