Apply a Fade In transition to the ul li elements following a JavaScript toggle

Question

Apply a Fade In transition to the ul li elements following a JavaScript toggle

I'm currently experimenting with implementing a Fade in from the right animation for the links displayed in the menu after toggling the menu body in the browser. Despite my efforts, I am unable to determine why the animation is not functioning as expected. I have attempted placing the animation in various sections of the ul and even tried adding a classlist without success. It's possible that I may be inserting the animation in the incorrect element, but I'm uncertain. You can view an example of the animation effect I desire for the links here: https://codepen.io/Fafnir/pen/mvVyRz. My primary focus is on achieving the FadeInRight animation rather than the underline link style.

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;
        
        
        //This section will execute another function when clicked again, essentially toggling back to initial state.
} 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;
}

/*Utilizing position methods like left, right, top, and bottom to dictate the menu appearance 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>

javascript css animation navigation transition

Answer 1

Answer №1

If I comprehend your query correctly, the primary concern here involves utilizing animation for achieving the fade-in effect. Instead of using animation, consider substituting it with transition to accomplish the desired outcome:

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

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

  /*
  Use transition instead of animation
  */
  transition: all 1.5s ease;
}

Furthermore, contemplate modifying your menu structure by incorporating CSS classes rather than directly setting inline styles (e.g., via style.left = "200px"). You can determine whether the menu is toggled by checking for the presence of a "toggle" class on the menu element itself instead of relying on an external variable (e.g., toggleStatus):

if(menu.classList.contains('toggled')) {
    /* Menu has 'toggled' class indicating that it is toggled */
}
else {
    /* Menu does not have 'toggled' class indicating that it is not toggled */
}

This approach offers several benefits; besides rendering the toggleStatus variable unnecessary, you can expand your CSS to ensure that the toggle class indirectly triggers the "fade-in" transition behavior you desire for li elements to display as illustrated below:

/* 
The transformation and opacity changes to li only apply when the parent
menu has the 'toggled' class applied
*/
#menu.toggled li {
  transform:translateX(0px);
  opacity:1;
}

For more detailed insights into this methodology, refer to the comments provided within the code snippet below:

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

/*
Iterate through each li element within #menu, calculate a transition delay, and apply it directly to
each li element based on its index (creating a staggered effect)
*/
document.body.querySelectorAll('#menu li').forEach((li,index) => {

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

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

  /* 
  Consider employing a CSS class and the contains() method to track 
  state without relying on the toggleStatus variable
  */
  if (menu.classList.contains('toggled')) {
    
    /*
    Remove the 'toggled' class (modifier) from both the menu and toggleMenu elements
    when the menu is toggled
    */
    menu.classList.remove('toggled');
    toggleMenu.classList.remove('toggled');
    
  } else {
  
    /*
    Add the 'toggled' class (modifier) to both the menu and toggleMenu elements
    when the menu is not toggled
    */
    menu.classList.add('toggled');
    toggleMenu.classList.add('toggled');
  }

});

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

/*
Define the final animated state for menu
items (li elements) when toggled
*/
#menu.toggled li {
  transform:translateX(0px);
  opacity:1;
}

...

... Code snippets continue ...

I trust this guidance proves beneficial!

Answer 2

If I comprehend your query correctly, the primary concern here involves utilizing animation for achieving the fade-in effect. Instead of using animation, consider substituting it with transition to accomplish the desired outcome:

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

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

  /*
  Use transition instead of animation
  */
  transition: all 1.5s ease;
}

Furthermore, contemplate modifying your menu structure by incorporating CSS classes rather than directly setting inline styles (e.g., via style.left = "200px"). You can determine whether the menu is toggled by checking for the presence of a "toggle" class on the menu element itself instead of relying on an external variable (e.g., toggleStatus):

if(menu.classList.contains('toggled')) {
    /* Menu has 'toggled' class indicating that it is toggled */
}
else {
    /* Menu does not have 'toggled' class indicating that it is not toggled */
}

This approach offers several benefits; besides rendering the toggleStatus variable unnecessary, you can expand your CSS to ensure that the toggle class indirectly triggers the "fade-in" transition behavior you desire for li elements to display as illustrated below:

/* 
The transformation and opacity changes to li only apply when the parent
menu has the 'toggled' class applied
*/
#menu.toggled li {
  transform:translateX(0px);
  opacity:1;
}

For more detailed insights into this methodology, refer to the comments provided within the code snippet below:

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

/*
Iterate through each li element within #menu, calculate a transition delay, and apply it directly to
each li element based on its index (creating a staggered effect)
*/
document.body.querySelectorAll('#menu li').forEach((li,index) => {

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

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

  /* 
  Consider employing a CSS class and the contains() method to track 
  state without relying on the toggleStatus variable
  */
  if (menu.classList.contains('toggled')) {
    
    /*
    Remove the 'toggled' class (modifier) from both the menu and toggleMenu elements
    when the menu is toggled
    */
    menu.classList.remove('toggled');
    toggleMenu.classList.remove('toggled');
    
  } else {
  
    /*
    Add the 'toggled' class (modifier) to both the menu and toggleMenu elements
    when the menu is not toggled
    */
    menu.classList.add('toggled');
    toggleMenu.classList.add('toggled');
  }

});

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

/*
Define the final animated state for menu
items (li elements) when toggled
*/
#menu.toggled li {
  transform:translateX(0px);
  opacity:1;
}

...

... Code snippets continue ...

I trust this guidance proves beneficial!

Apply a Fade In transition to the ul li elements following a JavaScript toggle

Answer №1

Similar questions

Switching the background image of a div by clicking on a different div

Retrieving all selected checkboxes in AngularJS

Creating a redux store with an object using typescript: A step-by-step guide

What could be causing my header component to rerender even when there are no new props being received?

Steps for uploading an item to an API using an Excel document

"Customize the number of items displayed per page with Bootstrap Vue's perPage

What is the best way to pass a variable between different routing functions?

Remove the color gradient for the column headers in the Google Visualization table

The type unknown[] cannot be assigned to type React.ReactNode

What could be causing React onclick events to not trigger when wrapped within a Vue application? (No additional libraries)

Customize the MUI (JoyUI) Autocomplete feature in React using react-hook-form to display a unique value instead of the label

What is the best way to justify list items to the left?

Modify the contents of an array within a string using JavaScript

Struggling with Vue's Router Transition fade in/out effect not functioning as expected?

What is the process of creating a MaterialUI checkbox named "Badge"?

Difficulty Loading Static JavaScript File in Express.js

Stylish CSS typography options for both Mac and Windows users

What is the best way to integrate ES6 ReactJS code into an Express application?

Step-by-step guide on positioning an image to show at the bottom of a div

Update the image with a new one using jQuery and PHP, then refresh the page to see