javascript 设置样式动画不起作用

Question

我正在尝试为移动设备创建汉堡包菜单。我遵循了一个教程并且一切正常，直到我进入 js 部分。这是js代码：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    burger.addEventListener('click', () => {
        //toggle nav
        nav.classList.toggle('nav-active');

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


};

navSlide();

基本上是激活菜单从右侧浮动，然后每个菜单项都应该缓入。问题是菜单项的动画不存在。这是应该设置此动画的行：

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

我将两个控制台日志放在它周围以查看发生了什么，两次它都是一个空字符串。我不明白这是为什么。我不太擅长 js，所以这可能真的很愚蠢。我看了一段时间，所以如果有人能帮助我，我会非常高兴。

Answer 1

将link.style.animation更改为：

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

javascript 设置样式动画不起作用

Setting style animation with javascript not working

javascript

css

css-animations