0

我正在用 css 和 javascript 制作一个导航栏，但遇到了一个问题，当我在 webkit 动画延迟中添加一个表达式时它不起作用，但是当我输入一个数字时它就起作用了。

这不起作用：

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

这有效：

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

此动画适用于导航的 li 元素，我希望它们一个接一个地淡入。

这是我的代码：

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();

提前致谢！

4

2 回答 2

1

尝试使用反引号 (`) 而不是双引号 (")

link.style.webkitAnimation = `navLinkFade ease 0.5s forwards ${index / 7 + 0.3}s`;
于 2021-02-07T17:09:35.960 回答
-1

将您的表达式存储在一个变量中，然后将其添加到 webkit-animation 字符串中。

于 2021-02-07T15:54:45.227 回答