为什么设置了transition，但是没有动画效果
来源：3-2 作业题
慕粉1473146645
2019-07-06 16:54:41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scala=1,max-width=1,min-width=1,user-scalable=no">
<title>移动终端适配</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="nav">
<div class="nav-min">
<p>IMOOC</p>
<div class="nav-active" id="nav-active">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="nav-container" id="nav-container">
<ul class="nav-item">
<li class="nav-list"><a href="###">前端</a></li>
<li class="nav-list"><a href="###">Java</a></li>
<li class="nav-list"><a href="###">Ios</a></li>
<li class="nav-list"><a href="###">Android</a></li>
<li class="nav-list"><a href="###">php</a></li>
</ul>
</div>
<div class="nav-content">
<div class="nav-box">
<div class="nav-img">
<a href="###" class="nav-img-src">
<img src="./img/1.png">
</a>
</div>
<div class="nav-btn">
<button type="button">start</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./js/zepto.min.js"></script>
<script type="text/javascript" src="./js/ui.js"></script>
</body>
</html>
/*初始化*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
width: 100%;
font-size: 1.25rem;
height: 100%;
}
a{
text-decoration: none;
color: #757575;
}
li{
list-style: none;
}
/*nav*/
.nav{
width: 100%;
background-color: #B2C5CC;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-content{
width: 25rem;
display: flex;
justify-content: space-around;
}
.nav-box{
width: 5.0rem;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.nav-btn{
width: 100%;
height: 7.5rem;
display: flex;
justify-content: center;
}
.nav-btn button{
-webkit-tap-highlight-color:none;
width: 100%;
height: 2.5rem;
border-radius: 0.5rem;
border:none;
}
.nav-min{
width: 100%;
height: 2rem;
position: relative;
background-color: #7EA6B1;
text-align: center;
color: #757575;
line-height: 2rem;
display: none;
}
.nav-active{
width: 1.3rem;
height: 1.3rem;
border-radius: 0.3rem;
border: 1px solid #757575;
position: absolute;
top: 0.3rem;
right: 0.3rem;
}
.nav-active ul{
width: 100%;
height:100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.nav-active ul li{
width: 0.8rem;
height: 4px;
border: 2px solid #757575;
border-radius: 5px;
}
/*媒体查询*/
@media screen and (min-width:760px) and (max-width: 800px){
.nav-container{
width: 25rem;
height: 5rem;
}
.nav-item{
width: 100%;
height: 100%;
display: flex;
justify-content:space-around;
align-items: center;
}
}
@media screen and (min-width: 375px) and (max-width: 760px){
.nav-min{
display: block;
}
.nav-container{
width: 12rem;
position: absolute;
top: 2rem;
left: 50%;
transform: translate(-50%,0);
background-color: #B2C5CC;
transition: height 0.5s;
-webkit-transition: width 1s;
display: none;
}
.nav-item{
text-align: center;
font-size: 24px;
}
.nav-list{
border-bottom: 1px solid #757575;
}
}
$(document).ready(function(){
$('#nav-active').on('click',function(){
$('#nav-container').toggle()
})
})
1回答
-
你好，是因为用了toggle()方法，这个方法设置元素的显示与隐藏，相当于display属性的block和none，所以设置的过渡没有效果。
过渡可以不用高度实现，改为top，参考修改：
js代码：
自己可以测试下，祝学习愉快！
0
相似问题