在 JS 切换后为 ul li 添加淡入动画

Question

在将菜单主体切换到浏览器后，我正在尝试为菜单中 link 的右侧动画添加淡入效果。但是我似乎无法弄清楚为什么动画不起作用。我尝试将动画放在 ul 的其他部分，甚至添加一个类列表。也许我只是将动画放在错误的元素中，我不确定。可以在此处找到我正在谈论的 links 的动画示例： https://codepen.io/Fafnir/pen/mvVyRz 我不担心下划线 link 样式，只是 FadeInRight 动画。

var toggleStatus = 1;
   
   if (toggleStatus == 1) {
    document.getElementById("menu").style.left = "-5px";
    
       
        //The Burger Menu icon is called toggleMenu
        document.getElementById("toggleMenu").style.left = "200px";
        
    toggleStatus = 0;
        
        
        //now it will do another function if it's clicked again, the toggle "off" switch back to whatever I tell it to do.
   } else if (toggleStatus == 0) {
    document.getElementById("menu").style.left = "-245px";
   
        
        document.getElementById("toggleMenu").style.left = "5px";
         toggleStatus = 1
   }
  }

* {
 margin: 0;
 padding: 0;
 text-decoration: none;
}

body {
 background-color: grey;
}

/*I can use the left, right, top, bottom position methods to make the menu appear from any direction. */
#menu {
 width: 240px;
 background-color: orange;
 position: fixed;
 top: 0;
 bottom: 0;
 left:-250px;
 z-index: 1000;
  transition: all ease-in-out 200ms;
 -webkit-transition: all ease-in-out 200ms;
border-right: 2px solid black;
  width: 240px;
  height:350px;
 overflow:scroll;
 overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
overflow: -moz-scrollbars-none;
 
  
 
}

#menu::-webkit-scrollbar {
  width: 0 !important 
}




#menu img {
 display: block;
 width: 10%;
 margin: 0 auto;
 padding-top: 50px;
}

#menu ul {
 padding-left: 30px;
 padding-top: 35px;
  
}

#menu ul li {
 list-style: none;
 padding: 4px 0px;

  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
 
  
}

#menu ul li a {
 font-family: Arial;
 font-weight: 300;
 color: #272727;
 text-transform: uppercase;
}


#toggleMenu {
 width: 20px;
 height: 20px;
 background-color: #fff;
 background-image: url(https://static.thenounproject.com/png/195031-200.png);
  background-size:cover;
 position: fixed;
 top: 0px;
 left: 5px;
 z-index: 1050;
 cursor: pointer;
 border: 10px solid #fff;
 border-radius: 2px;
 transition: all ease-in-out 200ms;
 -webkit-transition: all ease-in-out 200ms;
}

#toggleMenu:hover {
 opacity: 0.7;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="toggleMenu"></div>
  
 <div id="menu">
    
  <img src="https://cdn3.dualshockers.com/wp-content/uploads/2011/11/Master-Sword-and-Triforce.jpg">
  <!--**MAYBE ADD A CLASS TO UL AND CHANGE NAV ID-->
    <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Cases</a></li>
   <li><a href="#">Personal projects</a></li>
   <li><a href="#">About me</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </div>


  

</body>
</html>

Answer 1

如果我对你的问题理解正确，那么这里的主要问题是使用 animation 来实现这种淡入淡出效果。考虑将 animation 替换为 transition，以达到预期效果：

#menu ul li {
  list-style: none;
  padding: 4px 0px;

  /*
  Specify initial state and transition for menu li
  */
  opacity:0;
  transform:translateX(-25px); 

  /*
  Use transition rather than animation
  */
  transition: all 1.5s ease;
}

此外，考虑修改您的菜单以使用 CSS classes，而不是直接设置内联样式（即通过 style.left = "200px")。例如，您可以确定是否通过检查 menu 元素本身是否存在 "toggle" class 而不是使用外部变量（即 toggleStatus）来切换菜单：

if(menu.classList.contains('toggled')) {
    /* Menu is toggled is toggled class present */
}
else {
    /* Menu is not toggled seeing that toggled class is not present */
}

这种方法有几个优点；除了 toggleStatus 变量变得多余之外，您可以简单地扩展 CSS 以便 toggle class 间接触发您想要的 "fade in" 转换行为 li 元素通过以下显示：

/* 
This change to li transform and opacity only applies when parent
menu has toggled class applied
*/
#menu.toggled li {
  transform:translateX(0px);
  opacity:1;
}

有关此方法的更多详细信息，请参阅以下代码段中的评论：

const toggleMenu = document.getElementById('toggleMenu');

/*
Iterate each li of #menu, calculate a transition delay and apply to
each li element directly via elements index (this creates staggered
effect as seen in your sample)
*/
document.body.querySelectorAll('#menu li').forEach((li,index) => {

    li.style.transitionDelay = (0.1*index) + 's';
})

toggleMenu.addEventListener('click', () => {
 
  /*
  Get the menu element for use in either toggle case
  */
  const menu = document.getElementById("menu");

  /* 
  Consider using a CSS class and contans() method to track 
  state rather than toggleStatus variable
  */
  if (menu.classList.contains('toggled')) {
    
    /*
    If menu toggled, remove toggled class (modifier)
    from menu and toggleMenu elements
    */
    menu.classList.remove('toggled');
    toggleMenu.classList.remove('toggled');
    
  } else {
  
    /*
    If menu not toggled, add toggled class (modifier)
    to menu and toggleMenu elements
    */
    menu.classList.add('toggled');
    toggleMenu.classList.add('toggled');
  }

});

/*
Specify toggled state for menu
*/
#menu.toggled {
  left:-5px;
}

/*
Specify end animation state for menu
li elements when toggled
*/
#menu.toggled li {
  transform:translateX(0px);
  opacity:1;
}

/*
Specify toggled state for toggleMenu
*/
#toggleMenu.toggled {
  left:200px;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body {
  background-color: grey;
}

#menu {
  background-color: orange;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -250px;
  z-index: 1000;
  transition: all ease-in-out 200ms;
  -webkit-transition: all ease-in-out 200ms;
  border-right: 2px solid black;
  width: 240px;
  height: 350px;
  overflow: scroll;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#menu::-webkit-scrollbar {
  width: 0 !important
}

#menu img {
  display: block;
  width: 10%;
  margin: 0 auto;
  padding-top: 50px;
}

#menu ul {
  padding-left: 30px;
  padding-top: 35px;
}

#menu ul li {
  list-style: none;
  padding: 4px 0px;
  
  /*
  Specify initial state and transition for menu li
  */
  opacity:0;
  transform:translateX(-25px); 

  /*
  Use transition rather than animation
  */
  transition: all 1.5s ease;
}

#menu ul li a {
  font-family: Arial;
  font-weight: 300;
  color: #272727;
  text-transform: uppercase;
}

#toggleMenu {
  width: 20px;
  height: 20px;
  background-color: #fff;
  background-image: url(https://static.thenounproject.com/png/195031-200.png);
  background-size: cover;
  position: fixed;
  top: 0px;
  left: 5px;
  z-index: 1050;
  cursor: pointer;
  border: 10px solid #fff;
  border-radius: 2px;
  transition: all ease-in-out 200ms;
  -webkit-transition: all ease-in-out 200ms;
}

#toggleMenu:hover {
  opacity: 0.7;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="toggleMenu"></div>

  <div id="menu">

    <img src="https://cdn3.dualshockers.com/wp-content/uploads/2011/11/Master-Sword-and-Triforce.jpg">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Cases</a></li>
      <li><a href="#">Personal projects</a></li>
      <li><a href="#">About me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</body>
</html>

希望对您有所帮助！

在 JS 切换后为 ul li 添加淡入动画

Add Fade In animation to ul li after JS toggle

javascript

css

navigation

animation

transition