CODEWITHSUNDEEP
javascriptcssanimationnavigationtransition
Dez G Camargo
Dez G Camargo

Reputation: 31

Add Fade In animation to ul li after JS toggle

I'm trying to add a Fade in from the right animation for the links in the menu after toggling the body of the menu into the browser. However I can't seem to figure out why the animation won't work. I tried putting the animation in other parts of the ul and even adding a classlist. Perhaps I'm just putting the animation in the wrong element, I'm not sure. An example of the animation of the links I'm talking about can be found here: https://codepen.io/Fafnir/pen/mvVyRz I'm not worried about the underline link style, just the FadeInRight animation.

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>

Upvotes: 2

Views: 888

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30370

If I understand your question correctly, then the main issue here is the use of animation to achieve this fade in effect. Consider replacing animation with transition instead, to achieve the desired effect:

#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;
}

Also, consider revising your menu to make use of CSS classes, rather than setting inline styles directly (ie via style.left = "200px"). For instance, you can determine if the menu is toggled by checking for the presence of a "toggle" class on the menu element itself rather than using an external variable (ie 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 */
}

There are a few advantages with this approach; in addition to the toggleStatus variable becoming redundant, you can simply extend your CSS so that the toggle class indirectly triggers the "fade in" transition behaviour that you want li elements to show via the following:

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

For more detail on this approach, see the comments in the snippet below:

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>

Hope this helps!

Upvotes: 1

Related Questions