title: Trasition doesn't work with addClass and RemoveClass
body: <p>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.</p>
  
  <p>html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on('load', function() {
  
    $("#container-wrapper").scroll(function() {
      if ($('#container-wrapper').scrollTop() &gt; 25) {
        $('#list-menu').addClass('down');
      } else {
        $('#list-menu').removeClass('down');
      }
  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul id=list-menu&gt;
    &lt;div class="container"&gt;
      &lt;div class="col-md-10 col-md-offset-2"&gt;
        &lt;li&gt;&lt;a href="default.asp"&gt;&lt;i class="fa fa-home fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="title-menu"&gt;Inicio&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="news.asp"&gt;&lt;i class="fa fa-users fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="title-menu"&gt;Empleado&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="contact.asp"&gt;&lt;i class="fa fa-calendar fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="title-menu"&gt;&lt;span&gt;Citas&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.asp"&gt;&lt;i class="fa fa-male fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="title-menu"&gt;&lt;span&gt;Pacientes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.asp"&gt;&lt;i class="fa fa-eur fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="title-menu"&gt;&lt;span&gt;Facturación&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.asp"&gt;&lt;i class="fa fa-bar-chart fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="title-menu"&gt;&lt;span&gt;Estadísticas&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.asp"&gt;&lt;i class="fa fa-comments-o fa-lg" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="title-menu"&gt;&lt;span&gt;Campañas&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Repeat, the script works, but don't do the transition! Thanks for the help!</p>