【发布时间】：2017-09-14 04:21:39
【问题描述】：
我想在滚动容器时，我的菜单更改她的高度、宽度并隐藏她的标题，我知道了，但我添加的过渡效果不起作用。
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>重复一遍，脚本有效，但不要进行过渡！感谢您的帮助！
【问题讨论】：
-
你能为工作代码提供一个小提琴吗？
-
transition 仅适用于数字值（它将值分解为位以进行转换）。如果想要从无到阻塞的过渡，那么只有一步可能！你可以试试 opacity :0 to opacity:1
标签： javascript jquery html css