sohunn Posts - Answer Overflow

sohunn

•Created by sohunn on 4/23/2024 in #front-end

background image transitions

Hey guys, i have a simple carousel that cycles through images whenever a button is clicked. One issue is, i'm unable to figure out why my images aren't performing a transition when switched from one to another. I'm using sveltekit with tailwind css here is how my script tag looks like:

let currentImgPage = 0;
let currentImg = MotorcylingJourney[currentImgPage];

const nextImg = () => {
    if (currentImgPage === MotorcylingJourney.length - 1) return;
    currentImgPage++;
    currentImg = MotorcylingJourney[currentImgPage];
};

const prevImg = () => {
    if (currentImgPage === 0) return;
    currentImgPage--;
    currentImg = MotorcylingJourney[currentImgPage];
};

let currentImgPage = 0;
let currentImg = MotorcylingJourney[currentImgPage];

const nextImg = () => {
    if (currentImgPage === MotorcylingJourney.length - 1) return;
    currentImgPage++;
    currentImg = MotorcylingJourney[currentImgPage];
};

const prevImg = () => {
    if (currentImgPage === 0) return;
    currentImgPage--;
    currentImg = MotorcylingJourney[currentImgPage];
};

and my markup looks like this

<div
  class="bg-cover bg-center h-[400px] rounded-lg transition duration-500 ease-in-out"
  style="background-image: url('{currentImg.imgPath}');"
></div>
<button class="btn" on:click={nextImg}>Next</button>

<div
  class="bg-cover bg-center h-[400px] rounded-lg transition duration-500 ease-in-out"
  style="background-image: url('{currentImg.imgPath}');"
></div>
<button class="btn" on:click={nextImg}>Next</button>

when i click my "next" button for instance, it never performs any transition

14 replies

KPCKevin Powell - Community

•Created by sohunn on 2/15/2024 in #front-end

CSS transitions

I have an unordered list that looks like

        <ul class={`nav-links row ${isExpanded ? '' : 'hidden'}`}>
            <li class="nav-link"><a href="/">Home</a></li>
            <li class="nav-link"><a href="/">About</a></li>
            <li class="nav-link"><a href="/">Contact</a></li>
            <li class="nav-link"><a href="/">Login</a></li>
        </ul>

        <ul class={`nav-links row ${isExpanded ? '' : 'hidden'}`}>
            <li class="nav-link"><a href="/">Home</a></li>
            <li class="nav-link"><a href="/">About</a></li>
            <li class="nav-link"><a href="/">Contact</a></li>
            <li class="nav-link"><a href="/">Login</a></li>
        </ul>

i'm doing mobile first design and i have a hamburger icon and when you click on it, the navbar expands. when the navbar is not expanded, i simply hide the ul by setting its display to none. i want to add a transition when this happens to make sure the change is smooth. i tried to add a transition on the ul but that didn't work and i'm unsure what to do

5 replies

Gaming

Programming