I want to create tabs that smoothly fade between each other when switching. The code I have works, but there's a slight issue. When transitioning from one tab to the previous one, there is a momentary glitch where the last tab briefly changes state before fading.
The HTML:
function openSvc(evt, svc) {
var i, x, tablinks, opacitys;
x = document.getElementsByClassName("svc");
for (i = 0; i < x.length; i++) {
x[i].classList.remove('display-yes');
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(svc).classList.add('display-yes');
evt.currentTarget.className += " active";
}.svc {
opacity: 0;
position: absolute;
transition: .3s;
}
.display-yes {
opacity: 1;
position: relative;
}<div class="tab">
<button class="tablink" onclick="openSvc(event,'dev')"> Software Development </button>
<button class="tablink active" onclick="openSvc(event,'it')"> IT Infrastructures </button>
<button class="tablink" onclick="openSvc(event,'design')"> UX / UI Design </button>
<button class="tablink" onclick="openSvc(event,'consult')"> Consultancy </button>
</div>
<div id="dev" class="svc display-yes">
<p>lorem ipsum1
</div>
<div id="it" class="svc">
<p>lorem ipsum2
</div>
<div id="design" class="svc">
<p>lorem ipsum3
</div>
<div id="consult" class="svc">
<p>lorem ipsum4
</div>View the example here: https://jsfiddle.net/4fz01c2o/
Your assistance is greatly appreciated!