用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}`;