Bonjour,

Je débute avec Javascript et j'aimerais faire un menu avec une animation. Le problème c'est que l'animation s'exécute bien pour l'affichage du menu, mais impossible de la faire s'exécuter après... Je pense que c'est lla classe css 'hidden' qui se déclenche trop tôt, alors que j'ai mis un setTimeout... Bref voilà le code :

HTML

	<div class="navbar-menu hidden" id="navbar-collapse-target">
				<ul class="navbar-navigation">
					<?php 
						if (isset($_SESSION['id'])&&isset($_SESSION['user'])) {	
					?>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="icon-user"></span> Bienvenue, <?=$_SESSION['user']?> <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="logout.php">Se d&eacute;connecter</a></li>
                                </ul>
                        </li>
                    <?php 
                    	}
                    	else {
                    ?>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle">
                                <span class="icon-user"></span> Non connect&eacute; <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="login.php">Se connecter</a></li>
                                </ul>
                        </li>
                   <?php } ?>
				</ul>
			</div>

CSS

/*animations menu*/
@keyframes menu-collapse-in {
	from{
		opacity: 0;
    position: relative;
    left: -10%;
	}
	to {
		opacity: 1;
    position: relative;
    left: 0px;
	}
}

@keyframes menu-collapse-out {
  from {
    opacity: 1;
    position: relative;
    left: 0px;
  }
  50% {
    opacity: 0.5;
    position: relative;
    left: -5%;
  }
  to {
    opacity: 0;
    position: relative;
    left: 10%;
  }
}

.hidden {
  display: none;
}

.navbar-menu.menu-collapse-out {
  animation-name: menu-collapse-out;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.navbar-menu.active {
  animation-name: menu-collapse-in;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  margin-top: 31px;
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: #e3f2fd;
  width: 110%;
  float: left;
}

et JS

var collapseTarget = document.getElementById('navbar-collapse-target');
var toggle = document.getElementById('navbar-collapse-toggle');
toggle.addEventListener('click', function (ev) {
	if (!collapseTarget.classList.contains('active')) {
		collapseTarget.classList.add('active');
		collapseTarget.classList.remove('hidden');
		collapseTarget.classList.remove('menu-collapse-out');
		toggle.classList.add('active');
		}
	else {
		collapseTarget.classList.add('menu-collapse-out');
		collapseTarget.classList.remove('active');
		toggle.classList.remove('active');
		setTimeout(collapseTarget.classList.add('hidden'), 500);
	}
});

Merci de votre aide.