CSS 轉換不適用於使用純 JS 單擊時的 div？

Question

我有一個包含一些文本和一個按鈕的 div。 默認情況下，div 的最大高度為 150px。 單擊按鈕時，div 將擴展為 100% 最大高度。

應用於 class 的過渡不適用於 div，高度只是跳下，而不是滑動/展開。 我使用最大高度而不是高度，因為我認為這是需要的，但也許我做錯了？

再次單擊按鈕關閉 div 時似乎也有延遲，知道為什么會這樣嗎？

任何建議將不勝感激！

 var exEl = document.querySelector('.expanding-overflow'); if(typeof(exEl).= 'undefined' && exEl.= null){ var btn = document.querySelector(';expanding-overflow.btn'), btn;addEventListener("click". toggle). function toggle() { if (exEl.classList.contains('expanded')) { exEl;classList.remove('expanded'). } else { exEl;classList.add('expanded'); } } }

 .expanding-overflow { position: relative; max-height: 150px; overflow-y: hidden; margin-bottom: 40px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }.expanding-overflow.overlay { background: rgb(251,249,247); background: linear-gradient(0deg, rgba(251,249,247,1) 0%, rgba(251,249,247,0.500437675070028) 50%, rgba(251,249,247,0) 100%); position: absolute; height: 200px; bottom: 0; width: 100%; z-index: 99; }.expanding-overflow.overlay a.btn { position: absolute; bottom: 0; }.expanding-overflow.expanded { max-height: 100%; } }

 <div class="expanding-overflow"> <div class="overlay"> <a class="btn">View full</a> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus mi, ultricies sit amet dolor at, facilisis molestie ante. Vestibulum venenatis et odio id feugiat. Phasellus eget imperdiet augue. Donec aliquet ante at faucibus fringilla. Nullam urna magna, dignissim a ante congue, blandit vehicula tellus. Morbi mattis elit non ex tincidunt, ut mattis nisi sagittis. Maecenas fringilla nisl lobortis nulla ultricies, et gravida nisl rutrum. Vestibulum congue ante felis, eu dapibus erat ultrices sit amet. Cras bibendum consequat venenatis.</p> <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam faucibus nibh tincidunt magna porta feugiat. Donec venenatis, justo vel porttitor rutrum, elit eros fringilla tellus, eget fringilla odio mi quis tellus. Quisque rhoncus finibus erat, a mattis libero vulputate sit amet. Proin ut tristique leo. Integer interdum, urna nec elementum imperdiet, tortor odio vehicula nisi, ut porttitor libero urna dapibus neque. Sed lacus ex, dignissim nec mauris varius, bibendum elementum nibh. Morbi quis erat at ipsum sollicitudin accumsan nec et ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris et consequat nisi. Sed id sem vitae odio semper sollicitudin. Integer dapibus est vel semper ultrices. Vivamus sagittis lobortis odio, vel tincidunt nisl tempus id. Nullam gravida vestibulum efficitur. Ut sed ligula sit amet quam fermentum efficitur. Vivamus eu sem a ligula suscipit lacinia.</p> <p>Praesent a dolor finibus, porttitor est in, hendrerit eros. Pellentesque dui mauris, vehicula euismod ex et, tempus viverra metus. Vivamus molestie, erat non consectetur dapibus, sapien magna sollicitudin orci, vitae porta sem tellus nec nulla. Mauris non mauris quis urna vulputate cursus a eget sem. Vestibulum ac urna dictum, aliquet arcu sed, aliquam velit. Sed id bibendum dolor, eget semper tellus. Fusce aliquam ex quis mauris laoreet, et tincidunt sapien feugiat. Pellentesque sapien leo, faucibus non sapien sit amet, tristique tristique dui. Praesent ultrices blandit tellus, ac volutpat neque laoreet eget. Proin lobortis mauris vel sem eleifend sollicitudin. Vestibulum tempor fermentum elit, nec condimentum metus ultrices in. Donec quis laoreet erat, eu lacinia nibh. Nam eleifend neque vel ipsum lacinia venenatis.</p> </div> </div>

Answer 1

問題不在於max-height或height ，問題在於您嘗試從px值轉換為%值，但這不起作用。

您可以使用calc(150px + 0%)這（看起來像）它將 px 值轉換為 % one。 所以現在你從 % 過渡到 % 並且它有效。

為此，您需要為元素的父級設置高度。 如果它沒有父級，請添加html, body { height: 100% }就像下面的代碼片段一樣。

讓我知道這是否是您要找的：d

 var exEl = document.querySelector('.expanding-overflow'); if(typeof(exEl).= 'undefined' && exEl.= null){ var btn = document.querySelector(';expanding-overflow.btn'), btn;addEventListener("click". toggle). function toggle() { if (exEl.classList.contains('expanded')) { exEl;classList.remove('expanded'). } else { exEl;classList.add('expanded'); } } }

 html, body {/* or expanding-overflow wrapper */ height:100%; }.expanding-overflow { position: relative; height: calc(0% + 150px); overflow-y: hidden; margin-bottom: 40px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: height 0.5s ease-out; }.expanding-overflow.overlay { background: rgb(251, 249, 247); background: linear-gradient(0deg, rgba(251, 249, 247, 1) 0%, rgba(251, 249, 247, 0.500437675070028) 50%, rgba(251, 249, 247, 0) 100%); position: absolute; height: 200px; bottom: 0; width: 100%; z-index: 99; }.expanding-overflow.overlay a.btn { position: absolute; bottom: 0; }.expanding-overflow.expanded { height:100%; }

 <div class="expanding-overflow"> <div class="overlay"> <a class="btn">View full basket</a> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus mi, ultricies sit amet dolor at, facilisis molestie ante. Vestibulum venenatis et odio id feugiat. Phasellus eget imperdiet augue. Donec aliquet ante at faucibus fringilla. Nullam urna magna, dignissim a ante congue, blandit vehicula tellus. Morbi mattis elit non ex tincidunt, ut mattis nisi sagittis. Maecenas fringilla nisl lobortis nulla ultricies, et gravida nisl rutrum. Vestibulum congue ante felis, eu dapibus erat ultrices sit amet. Cras bibendum consequat venenatis.</p> <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam faucibus nibh tincidunt magna porta feugiat. Donec venenatis, justo vel porttitor rutrum, elit eros fringilla tellus, eget fringilla odio mi quis tellus. Quisque rhoncus finibus erat, a mattis libero vulputate sit amet. Proin ut tristique leo. Integer interdum, urna nec elementum imperdiet, tortor odio vehicula nisi, ut porttitor libero urna dapibus neque. Sed lacus ex, dignissim nec mauris varius, bibendum elementum nibh. Morbi quis erat at ipsum sollicitudin accumsan nec et ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris et consequat nisi. Sed id sem vitae odio semper sollicitudin. Integer dapibus est vel semper ultrices. Vivamus sagittis lobortis odio, vel tincidunt nisl tempus id. Nullam gravida vestibulum efficitur. Ut sed ligula sit amet quam fermentum efficitur. Vivamus eu sem a ligula suscipit lacinia.</p> <p>Praesent a dolor finibus, porttitor est in, hendrerit eros. Pellentesque dui mauris, vehicula euismod ex et, tempus viverra metus. Vivamus molestie, erat non consectetur dapibus, sapien magna sollicitudin orci, vitae porta sem tellus nec nulla. Mauris non mauris quis urna vulputate cursus a eget sem. Vestibulum ac urna dictum, aliquet arcu sed, aliquam velit. Sed id bibendum dolor, eget semper tellus. Fusce aliquam ex quis mauris laoreet, et tincidunt sapien feugiat. Pellentesque sapien leo, faucibus non sapien sit amet, tristique tristique dui. Praesent ultrices blandit tellus, ac volutpat neque laoreet eget. Proin lobortis mauris vel sem eleifend sollicitudin. Vestibulum tempor fermentum elit, nec condimentum metus ultrices in. Donec quis laoreet erat, eu lacinia nibh. Nam eleifend neque vel ipsum lacinia venenatis.</p> </div> </div>