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>

当用户单击Photography列表项时，我想对work.html上的列表项产生影响

<div class="albums">

    <h2>Albums</h2>

    <ul class="album-animation" style="list-style-type:none;">
        <li><a href="norway.html">Norway</a></li>
        <li>Iceland</li>
        <li>Holland</li>
        <li>Germany</li>
        <li>Italy</li>
        <li>Austria</li>
        <li>Spain</li>
        <li>Czech Republic</li>
        <li>France</li>
        <li>England</li>
        <li>Wales</li>
        <li>Scotland</li>
        <li>Ireland</li>
        <li>Australia</li>
    </ul>

</div>

我具有以下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 = (event) => {
  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`;
      }
  });
};

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

<div class="albums">

    <h2>Albums</h2>

    <ul class="album-animation" style="list-style-type:none;">
        <li><a href="norway.html">Norway</a></li>
        <li>Iceland</li>
        <li>Holland</li>
        <li>Germany</li>
        <li>Italy</li>
        <li>Austria</li>
        <li>Spain</li>
        <li>Czech Republic</li>
        <li>France</li>
        <li>England</li>
        <li>Wales</li>
        <li>Scotland</li>
        <li>Ireland</li>
        <li>Australia</li>
    </ul>

</div>

关于javascript - 打开页面时如何为列表项添加效果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59497376/