How to show transition on v-if statement-CodePudding

I have a form that contains 4 fields. 2 of the fields would only be shown if some value is selected on one of the other fields. I'd like to show these fields on a slide-fade transition but it did not seem to work on the enter effect . It does work on the leave effect though. Here is my code:

<form @submit.prevent="preventSubmit">
          <label for="testName" >Nom</label>
          <input type="text" id="testName" name="testName" v-model="testName"  placeholder="Saisir le nom du test">
          <label for="testType" >Type</label>
          <select name="testType" id="testType"  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"  id="nbQuestions" name="nbQuestions" v-model="nbQuestions" placeholder="Donner le nombre de questions">
            <label for="testStatut" >Statut</label>
            <select  id="testStatut" name="testStatut" @input="changeText">
                <option value="PRIVATE" selected="selected">Privé</option>
                <option value="PUBLIC">Publique</option>
            </select>
          </div>
          </transition>
        </form>

the 2 fields would only be shown if the testType is 'PARTIEL' as shown on the code. I also have a data object that contains the state of the component.

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

Here is my 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;
}

I'm using Vuejs docs for this transition and I'm actually using bootstrap 5 for the classes

CodePudding user response：

maybe just .slide-fade-enter-from instead of .slide-fade-enter