My DropDown list get's open much faster in chrome
but in firefox it get's open slower
I use transitions in Nuxt with methods to handle steps of transition
It works fine in both but it's slower in 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>and these are methods I used :
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);
},