Question

我有点难以用自动高度解决这个CSS过渡问题，并想知道其他人是否会有任何线索和建议。提前谢谢。

以下是我尝试工作的自动高度示例，但过渡不起作用，但自动高度是响应式网站的理想选择：

使用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工作？

谢谢！

Answer 1

感谢大家的反馈。这是我使用的最终解决方案，可以实现响应和平滑的切换：

http://jsfiddle.net/jhqvL4q0/4/

$(document).ready(function(){
    $(".button").click(function(){
        $(".collapse-list").toggleClass("collapse");
    });
});

Answer 2

无法使用高度转换：auto。最大高度的技巧是一个非常好的解决方案，但有一些不便，特别是如果最大高度远高于实际高度，则会出现奇怪的延迟。

以下是我使用的技巧：http://jsfiddle.net/g56jwux4/2/ 基本上它是两个相反方向翻译的叠瓦式DIV。看看jsfiddle的代码，因为我的英语不够清楚。

HTML部分：

<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&egrave;s tr&egrave;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; 
}

Answer 3

尝试以下内容。通过LI和高度，以便不会切断任何东西。根据需要进行调整。

＆＃13;

$(document).ready(function(){
  $(".button").click(function(){
    $(".test").toggleClass("expand", 5000);
  });
});

＆＃13;

.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;
  
    
}

＆＃13;

<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>

＆＃13;

CSS切换过渡动画，自动高度不起作用

3 个答案: