Mi lista desplegable se abre mucho más rápido en Chrome
pero en firefox se abre más lento
Uso transiciones en Nuxt con métodos para manejar pasos de transición.
Funciona bien en ambos pero es más lento en Firefox
<transition v-on:before-enter="beforeEnter" v-on:enter="enterCoins" v-on:leave="leave"> <ul v-if="coinsBox"> <li v-if="live_prices.length > 0" v-for="(currency,index) in live_prices" @click="activeCoin = index;activeCoinChange();coinsBox=false" :class="{active:activeCoin === index}"> <div class="coin"> <img :src="'/imgs/coins/'+currency.symbol.toLowerCase()+'.svg'" alt="" v-else> <span class="name en">{{ currency.symbol }} - </span> </div> </li> </ul> </transition>y estos son los métodos que utilicé:
beforeEnter(el) { el.style.height = 0; el.style.overflow = "auto"; }, enterCoins(el, done) { let maxHeight; if (this.live_prices.length <= 3 && this.live_prices.length > 0) { maxHeight = this.live_prices.length * 56 } else { maxHeight = 224 } this.increaseHeight(el, done, maxHeight) }, increaseHeight(el, done, maxHeight) { clearInterval(this.leaveInterval); const increaseHeight = () => { let elHeight = parseInt(el.style.height) if (elHeight < maxHeight) { const height = `${parseInt(el.style.height) + 5}px`; el.style.height = height; } else { clearInterval(this.enterInterval); done(); } }; this.enterInterval = setInterval(increaseHeight, 5); }, leave(el, done) { clearInterval(this.enterInterval); const decreaseHeight = () => { let elHeight = parseInt(el.style.height) if (elHeight > 0) { const height = `${parseInt(el.style.height) - 5}px`; el.style.height = height; } else { clearInterval(this.leaveInterval); done(); } }; this.leaveInterval = setInterval(decreaseHeight, 5); },