时间戳

首页 > 解决方案 > JS切换后添加淡入动画到ul li

javascript - JS切换后添加淡入动画到ul li

问题描述

在将菜单正文切换到浏览器后，我正在尝试从右侧动画中为菜单中的链接添加淡入淡出。但是我似乎无法弄清楚为什么动画不起作用。我尝试将动画放在 ul 的其他部分，甚至添加一个类列表。也许我只是将动画放在错误的元素中，我不确定。我正在谈论的链接动画示例可以在这里找到： https : //codepen.io/Fafnir/pen/mvVyRz 我不担心下划线链接样式，只是 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>

标签： javascriptcssanimationnavigationtransition

解决方案

如果我正确理解您的问题，那么这里的主要问题是使用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 类，而不是直接设置内联样式（即通过style.left = "200px"). 例如，您可以通过检查menu元素本身上是否存在“切换”类来确定菜单是否被切换，而不是比使用外部变量（即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该类间接触发您希望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>

希望这可以帮助！

推荐阅读