CSS转换不适用于UL列表上的最大高度切换

当我切换无序列表的最大高度时，我无法确定为何不应用指定的转换。切换是通过切换UL上的类来完成的。我试过把这个过渡放在最大高度的类中，但是无济于事。我创建了一个working example on JSFiddle，并在下面提供了完整的代码。预先感谢您的帮助。CSS转换不适用于UL列表上的最大高度切换

<!DOCTYPE html> 
<html lang=en> 
<head> 
    <title>Transition Problem</title> 
<style> 
.nav ul { 
    overflow: hidden; 
    transition: max-height 2s; 
    -webkit-transition: max-height 2s; 
    white-space: normal; 
} 

.max-height-150 { 
    max-height: 150px; 
} 

.max-height-none { 
    max-height: none; 
} 
</style> 
</head> 
<body> 
<p>The JavaScript switches the class correctly, and the height of the UL switches as expected, but the transition is not applied.</p> 
<button>SWITCH CLASS</button> 
<nav class="nav"> 
    <ul class="max-height-150"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
     <li>Item 6</li> 
     <li>Item 7</li> 
     <li>Item 8</li> 
     <li>Item 9</li> 
     <li>Item 10</li> 
     <li>Item 11</li> 
     <li>Item 12</li> 
     <li>Item 13</li> 
     <li>Item 14</li> 
     <li>Item 15</li> 
     <li>Item 16</li> 
     <li>Item 17</li> 
     <li>Item 18</li> 
     <li>Item 19</li> 
    </ul> 
</nav> 
<script> 
// Select the button: 
var button = document.getElementsByTagName('button')[0]; 

// Toggle between the two max-height classes when the button is clicked: 
var buttonClickListener = function (e) { 
    var navUl = document.querySelectorAll('.nav ul')[0]; 
    if (navUl.classList.contains('max-height-150')) { 
     navUl.classList.remove('max-height-150'); 
     navUl.classList.add('max-height-none'); 
    } else { 
     navUl.classList.add('max-height-150'); 
     navUl.classList.remove('max-height-none'); 
    } 
    e.preventDefault(); 
}; 

// Add a click listener on the button and register the toggle function on it: 
if (button.addEventListener) { 
    button.addEventListener('click', buttonClickListener, false); 
} else if (button.attachListener) { 
    button.attachEvent('click', buttonClickListener); 
} 
</script> 
</body> 
</html>

来源

2017-05-25 Tom

不幸的是，您不能从设置的最大高度转换为无（或自动或100％等）。您只能在设定的数字之间切换。尝试将新的最大高度设置为您认为它将具有的最大值，并且它应该以您想要的方式工作。

.max-height-none { 
    max-height: 350px; 
}

更新小提琴：https://jsfiddle.net/07cgn26r/1/

来源

2017-05-25 14:37:59

谢谢！唯一的问题是，从较大的最大高度到较小的最大高度的转换的开始具有“延迟”，实际上是花费在覆盖元素的实际高度和指定的最大高度之间的差异的时间。（例如，尝试最大高度：10000px而不是350px）。有没有办法用JavaScript动态添加最大高度（真正的全高），并仍然获得过渡效果？ – Tom

当然，试试这个https://jsfiddle.net/07cgn26r/2/ –

CSS转换不适用于UL列表上的最大高度切换

回答

相关问题