Если я правильно понимаю ваш вопрос, то основной проблемой здесь является использование 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, а не непосредственно устанавливать встроенные стили (например, через * 1007).*. Например, вы можете определить, переключается ли меню, проверяя наличие «переключающего» класса на самом элементе 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 косвенно запускал требуемое поведение перехода "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>
Надеюсь, это поможет!