CSS-Übergang nicht auf Max-Höhe-Switching auf UL-Liste angewendet

Ich kann nicht bestimmen, warum der angegebene Übergang nicht angewendet wird, wenn ich die maximale Höhe der ungeordneten Liste umschalte. Die Umschaltung erfolgt durch Umschalten der Klassen am UL. Ich habe versucht, den Übergang in die Max-Höhe-Klassen zu setzen, aber ohne Erfolg. Ich habe eine working example on JSFiddle erstellt, und der Code wird unten vollständig geliefert. Vielen Dank im Voraus für jede Hilfe.CSS-Übergang nicht auf Max-Höhe-Switching auf UL-Liste angewendet

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

Quelle

2017-05-25 Tom

Leider können Sie nicht von einer festgelegten maximalen Höhe zu keiner (oder automatisch oder 100% usw.) wechseln. Sie können nur zwischen festgelegten Nummern wechseln. Versuchen Sie, die neue maximale Höhe auf den größten Wert zu setzen, der Ihrer Meinung nach vorhanden sein wird, und es sollte so funktionieren, wie Sie es möchten.

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

Aktualisiert Geige: https://jsfiddle.net/07cgn26r/1/

Quelle

2017-05-25 14:37:59

Dank! Das einzige Problem ist, dass der Beginn des Übergangs von einer grßeren maximalen Höhe zu einer geringeren maximalen Höhe eine "Verzögerung" hat, bei der es sich tatsächlich um die Zeit handelt, die für die Differenz zwischen der tatsächlichen Höhe des Elements und der angegebenen maximalen Höhe benötigt wird. (Probieren Sie beispielsweise max-height aus: 10000px anstelle von 350px). Gibt es eine Möglichkeit, die maximale Höhe dynamisch (zur wahren vollen Höhe) mit JavaScript hinzuzufügen und trotzdem den Übergangseffekt zu erhalten? – Tom

Sicher, versuchen Sie dies https://jsfiddle.net/07cgn26r/2/ –

CSS-Übergang nicht auf Max-Höhe-Switching auf UL-Liste angewendet

Antwort

Verwandte Themen