Having trouble with this issue for 48 hours straight. Every time I attempt to click a button in the top bar, there is no animation. The intended behavior is for the width to increase and the left border color to change to green, but that's not what's happening. I am currently working with Svelte and am still inexperienced, hence the code quality is comparable to a PowerPoint presentation.
<script lang="ts">
export let name;
function onTopBarBtnClick(tab) {
let tabButton = document.getElementsByClassName('topbarbtn ' + tab)[0]
tabButton.classList.add('selected')
}
</script>
<main>
<nav class='topbar'>
<label class="websitenameinfo">{name}</label>
<button on:click={() => onTopBarBtnClick('1')} class="topbarbtn 1">Servers</button>
<button on:click={() => onTopBarBtnClick('2')} class="topbarbtn 2">Events</button>
<button on:click={() => onTopBarBtnClick('3')} class="topbarbtn 3">Store</button>
<button on:click={() => onTopBarBtnClick('4')} class="topbarbtn 4">Info</button>
</nav>
</main>
<style>
.topbar {
position: absolute;
width: 100vw;
height: 8vh;
top: 0vh;
left: 0vw;
background-color: #1c1c1c;
box-shadow: 1vh 1vh 2.8vh rgba(28, 28, 28, 0.8);
}
.websitenameinfo {
position: absolute;
top: 1vh;
left: 1vw;
text-transform: uppercase;
font-family: Tahoma;
font-size: 4.7vh;
background: -webkit-linear-gradient(#2071cd, #0ac7ba);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 3vh #579dffb3;
font-weight: 800;
}
.topbarbtn {
width: 10.1vw;
height: 8vh;
float: right;
border-radius: 0px;
background: -webkit-linear-gradient(#20cd31, #0ac7ba);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 3vh #15ffbd5e,
0px 0px 1.5vh #1573ff66;
font-weight: 600;
font-family: Tahoma;
font-size: 3.8vh;
border-image: linear-gradient();
border-width: 0px;
border-left-width: 0.1vw;
border-color: rgb(45, 45, 45);
color: rgb(52, 52, 52);
vertical-align: top;
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.3, 1);
}
.selected {
border-color: #0af05e;
width: 15vw;
border-left-width: 0.27vw;
text-shadow: 0px 0px 3vh #6fffd6da, 0px 0px 1.6vh #84ff106d;
}
</style>
After exhausting all my options available online, I still couldn't resolve the issue. My anticipation was for the buttons to widen and the left border color to switch to green upon clicking. However, it seems that nothing happens whatsoever when I click on them. It may be a problem with how I'm adding 'selected' to the class list, although I can't say for certain.