CODEWITHSUNDEEP
javascripthtmlcsswebkit-animation
motyas
motyas

Reputation: 1

Webkit animation delay doesn't working with expression (javascript)

I'm making a navbar with css and javascript and I'm getting an issue, when I put a expression in the webkit animation delay it doessn't work, but when I put a number it works.

this doesn't work:

link.style.webkitAnimation = "navLinkFade ease 0.5s forwards ${index / 7 + 0.3}s";

this works:

link.style.webkitAnimation = "navLinkFade ease 0.5s forwards 2s";

This animation is for the li elements of the nav and I want them to fade in one after the other.

Here's my code:

css



@-webkit-keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-moz-keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-ms-keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

js:

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {

        nav.classList.toggle('nav-active');

        navLinks.forEach((link, index) => {
            if(link.style.animation) {
                link.style.animation = '';
            }
            else {
                link.style.webkitAnimation = "navLinkFade ease 0.5s forwards ${index / 7 + 0.3}s";
                console.log(link.style.animation);
            }
        });
    
    });
}

navSlide();

Thanks in advance!

Upvotes: 0

Views: 67

Answers (2)

K i
K i

Reputation: 617

Try using backticks (`) instead of double quotes (")

link.style.webkitAnimation = `navLinkFade ease 0.5s forwards ${index / 7 + 0.3}s`;

Upvotes: 1

WillTechX20
WillTechX20

Reputation: 1

Store your expression in a variable and then add it to the webkit-animation string.

Upvotes: -1

Related Questions