Javascript 打开页面时，如何向列表项添加效果？

我正试图为一个业余摄影网站添加一些闪光点。我想对列出我的专辑的页面上的列表项施加影响（如挪威、冰岛、德国等）。我的导航见下文：

<nav id="navigation">
    <div class="logo">
        <h4>Christian Townsend</h4>
    </div>
    <ul class="nav-links">
        <li class="nav-links-active"><a href="index.html">Home</a></li>
        <li class="photography"><a href="work.html">Photography</a></li>
        <li class="albums-header"><a href="projects.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

我有下面的JavaScript代码，但它对我的列表项没有任何影响

const photography = document.querySelector('.photography');
const albumLinks = document.querySelectorAll('.album-animation li');

photography.addEventListener('click', () => {
    // Animate links

    albumLinks.forEach((link, index) => {
        if (link.style.animation) {
            link.style.animation = '';

        } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 10 + 0.9}s`;
        }
    });

});

CSS

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

---

看起来您只需要在页面加载时添加CSS动画。运行代码段以查看页面加载时发生的情况

const albumLinks=document.querySelectorAll（'.album animation li'）；
window.onload=（事件）=>{
albumLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=''；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/10+0.9}s`；
}
});
};
@关键帧navLinkFade{
来自{opacity:0；transform:translateX（50px）；}
到{opacity:1；transform:translateX（0px）}
}

相册


冰岛
荷兰
德国
意大利
奥地利
西班牙
捷克共和国
法国
英格兰
威尔士
苏格兰
爱尔兰
澳大利亚

谢谢你，吉坦贾利。你的解决方案很完美。我只需要将列表项的固有不透明度更改为0，现在效果可以按预期工作
 在JS中，您使用了
navLinkFade
。我想这在你的CSS里。介意给我们看一下相关的CSS吗？
@关键帧navLinkFade{从{opacity:0；transform:translateX（50px）；}到{opacity:1；transform:translateX（0px）}}
是两个元素（
nav#导航
和
div.albums
）在同一个HTML页面上？如何链接脚本文件？您的摄影类和相册动画类位于不同的文件中，因此当您尝试使用链接的脚本文件时，可能会出现错误，因为它无法找到其他类。如果所有东西都在一个文件中，它就工作了，这基本上就是我想要的，除了我希望所有的项目都不可见，并且效果是一次显示一个项目。
@keyframes navLinkFade { 
    from { opacity: 0; transform: translateX(50px); } 
    to { opacity: 1; transform: translateX(0px) }
}