CSS 切换过渡动画,自动高度不起作用
CSS toggle transition animation with auto height not working
我很难用自动高度解决这个 CSS 过渡问题,想知道其他人是否会有任何线索和建议。提前谢谢。
- 这是我尝试工作的自动高度示例,但过渡不起作用,但自动高度是响应式网站的理想选择:
http://jsfiddle.net/z5x6abog/
Javascript:
$(document).ready(function(){
$(".button").click(function(){
$(".test").toggleClass("collapse");
});
});
.CSS:
.test.collapse ul {
height: auto;
- 这是一个具有特定像素的特定高度的示例,但请注意,这并不理想,因为网站是响应式的,并且高度将始终由于浮动列表而变化:
http://jsfiddle.net/obn34ufx/
.CSS:
.test.collapse ul {
height: 500px;
有人知道使示例#1工作的方法吗?
谢谢!
不能使用带有 height:auto 的过渡。最大高度的技巧是一个很好的解决方案,但有一些不便,特别是如果最大高度远高于实际高度,则会出现奇怪的延迟。
这是我使用的技巧:http://jsfiddle.net/g56jwux4/2/基本上,它是两个在相反方向上转换的混合DIV。看看jsfiddle的代码,因为我的英语不够好,无法清楚地解释它。
网页部分:
<body>
<p>Technicaly this dropdown menu looks like a simple height transition.</p>
<p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p>
<input type="checkbox" id="menuOpen"></input>
<label id="bouton" for="menuOpen"><span>Click on me !</span>
<div id="menu">
<div id="masque">
<div class="choix" id="choix1">Choix 1</div>
<div class="choix" id="choix2">Choix 2</div>
<div class="choix" id="choix3">Choix 3 très très long pour voir la taille finale du menu</div>
<div class="choix" id="choix4">Choix 4</div>
<div class="choix" id="choix5">Choix 5</div>
<div class="choix" id="choix6">Choix 6</div>
</div>
</div>
</label>
</body>
CSS部分 :
body {
font-family: sans-serif;
}
#menuOpen {
display: none;
}
#bouton {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 30px;
background-color: lightgray;
cursor: pointer;
}
#bouton > span {
color: black;
padding: 6px;
line-height: 30px;
}
#menu {
position: absolute;
top: 100%;
overflow: hidden;
min-width: 100%;
transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
transform: translateY(-100%);
visibility: hidden;
color: white;
}
#menuOpen:checked + #bouton > #menu {
transform: translateY(0%);
visibility: visible;
transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
transform: translateY(0%);
}
#masque {
position: relative;
background-color: gray;
transform: translateY(100%);
transition: transform 0.3s linear 0s;
}
.choix {
white-space: nowrap;
padding: 3px 6px;
}
.choix:hover {
background-color: darkgray;
}
感谢大家的反馈。这是我采用的最终解决方案,它允许响应迅速且更流畅的切换:
http://jsfiddle.net/jhqvL4q0/4/
$(document).ready(function(){
$(".button").click(function(){
$(".collapse-list").toggleClass("collapse");
});
});
尝试如下操作。按 LI 和高度走,这样就不会切断任何东西。根据需要进行调整。
$(document).ready(function(){
$(".button").click(function(){
$(".test").toggleClass("expand", 5000);
});
});
.test ul {
width:50%;
overflow:hidden;
height:auto;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.test li {
float:left;
width:100px;
}
.test li:not(:nth-of-type(-n+10)) {
width:100px;
display: none;
}
.test.collapse ul {
width:50%;
height: 500px;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.test.expand ul li {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<ul>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
<li>Malesuada</li>
<li>Pellentesque</li>
<li>ulum tortor</li>
<li>amet quam</li>
</ul>
<a href="#" class="button">Toggle</a>
</div>
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- css转换高度不起作用
- 更改第二次推送时不起作用的元素高度
- internetexplorerjavascript样式.高度不起作用
- iframe高度100%不起作用
- jquery .height() 在媒体查询中使用百分比高度时不起作用
- CSS 切换过渡动画,自动高度不起作用
- jScrollPane高度刷新基于我的内容(不起作用)
- 最小高度:不起作用
- 引导滚动间谍偏移高度在火狐中不起作用
- 高度在自调用函数中不起作用
- iframe 自动调整高度大小不起作用
- CSS 高度在火狐中不起作用
- 溢出:即使设置高度也自动不起作用
- 最大高度不'不起作用
- 使用JS的100%页面高度在某些页面上不起作用
- 为什么css高度不起作用
- Jquery.animate 100%高度不起作用
- firefox在输入时更改文本区域的高度不起作用
- Javascript的宽度/高度不起作用和颜色