javascript - 打开页面时如何为列表项添加效果？

Question

我正在尝试为一个业余摄影网站添加一些耀斑。我想对列出我的专辑的页面上的列表项产生影响(例如挪威、冰岛、德国等)，请参见下面的导航:

<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) }
}

Answer 1

似乎您只需要在页面加载时添加 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>