Trasition不适用于addClass和RemoveClass

Question

I would like when scrolling container, my menu change her heigth, width and hide her title, I have got it but don't work the transition that I added.

html:

 $(window).on('load', function() { $("#container-wrapper").scroll(function() { if ($('#container-wrapper').scrollTop() > 25) { $('#list-menu').addClass('down'); } else { $('#list-menu').removeClass('down'); } }); }); 

 #list-menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: white; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #list-menu.down li { width: 90px; height: 38px; } #list-menu.down li a span { display: none; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id=list-menu> <div class="container"> <div class="col-md-10 col-md-offset-2"> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> </div> </div> 

Repeat, the script works, but don't do the transition! Thanks for the help!

Answer 1

Please refer to the updated code and updated codepen

 $(window).on('load', function () { $( "#container-wrapper" ).scroll(function() { if($('#container-wrapper').scrollTop() > 25){ $('#list-menu').addClass('down'); }else{ $('#list-menu').removeClass('down'); } }); }); 

 #list-menu{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: white; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .down li{ width: 90px; height: 38px; } .down li a span{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id=list-menu> <div class="container" id="container-wrapper" style="height:400px; overflow:auto;"> <div class="col-md-10 col-md-offset-2"> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li> <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li> <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li> <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li> <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li> <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li> <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li> </div> </div> </ul> 

The code is running as per your requirement now

Answer 2

You need to set the transition on the li's, not the '#list-menu'. Also for width and height to animate, you need initial values for it