Trasition不适用于addClass和RemoveClass

时间：2017-09-12 18:45:21

标签： javascript jquery html css

我想在滚动容器时，我的菜单会改变她的高度，宽度并隐藏她的标题，我已经得到了它但是不能完成我添加的过渡。

HTML：

＆＃13;
＆＃13; 
$(window).on('load', function() {

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

  });
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

重复一遍，脚本有效，但不要进行转换！谢谢你的帮助！

2 个答案:

答案 0 :(得分：0)

请参阅更新的代码并更新codepen

＆＃13;
＆＃13; 
$(window).on('load', function () {

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

});
  
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

代码现在按照您的要求运行

答案 1 :(得分：0)

您需要设置li的转换，而不是'#list-menu'。 同样，对于动画的宽度和高度，您需要初始值

相关问题
最新问题