I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, there is a split-second delay where the div expands down before shrinking back up (see image). I'm not sure what's causing this issue. Any insights would be greatly appreciated. Thank you.
<transition-group tag="div" name="QBox" mode="out-in">
<h3 class="Q-text" :key="questionID">{{questionText}}</h3>
<div class="option" :class="{'selected':option.selected}" v-for ="option in options" @click="nextQ(option.association)" :key="option.text"> {{option.text}} </div>
</transition-group>
.QBox-enter-active{
animation: slide-in 1s ease;
}
@keyframes slide-in {
0% {opacity: 0;}
100% {opacity: 1;}
}