我有一個包含 4 個欄位的表單。只有在其他欄位之一上選擇了某個值時，才會顯示其中的 2 個欄位。我想在幻燈片淡入淡出過渡中顯示這些欄位，但它似乎不適用于 enter 效果。不過，它確實對休假效果有效。這是我的代碼：
<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 進行類
uj5u.com熱心網友回復：
也許只是.slide-fade-enter-from而不是.slide-fade-enter
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461773.html
標籤：javascript Vue.js
上一篇：如何在vue中初始化陣列子元素