CSS-Übergang funktioniert nicht beim Ändern der Klasse von Javascript

Question

Ich habe eine versteckte div #about. Durch Klicken auf den Link #clickme wird das div durch eine Funktion eingeblendet. Leider funktioniert der CSS-Übergang (Opazität) nicht, obwohl er die beiden Klassen .hide und .unhide einschließlich der Übergänge beibehalten sollte. Irgendwelche Ideen?

HTML

<li><a id="clickme" href="javascript:unhide('about');">click me</a></li> 

<div id="about" class="hide"> 
<p>lorem ipsum …</p> 
</div> 

CSS

.hide { 
display: none; 
-webkit-transition: opacity 3s; 
-moz-transition: opacity 3s; 
-o-transition: opacity 3s; 
transition: opacity 3s; 
opacity:0; 
} 
.unhide { 
display: inline; 
opacity:1; 
} 

SCRIPT

<script> 
function unhide(divID) { 
var element = document.getElementById(divID); 
if (element) { 
    element.className=(element.className=='hide')?'hide unhide':'hide'; 
} 
} 
</script> 

Answer 1

Sie müssen die display:none aus dem Element entfernen. Sie verbergen im Wesentlichen das Element 2 Wege - display:none und opacity:0.

Wenn Sie die display:none entfernen und nur die opacity Eigenschaft übergehen, wird der Effekt funktionieren.

CSS

.hide { 
    -webkit-transition: opacity 3s; 
    -moz-transition: opacity 3s; 
    -o-transition: opacity 3s; 
    transition: opacity 3s; 
    opacity:0; 
} 

.unhide { 
    opacity:1; 
} 

function unhide(divID) { 
 
    var element = document.getElementById(divID); 
 
    if (element) { 
 
    element.className = (element.className == 'hide') ? 'hide unhide' : 'hide'; 
 
    } 
 
}

.hide { 
 
    -webkit-transition: opacity 3s; 
 
    -moz-transition: opacity 3s; 
 
    -o-transition: opacity 3s; 
 
    transition: opacity 3s; 
 
    opacity: 0; 
 
} 
 

 
.unhide { 
 
    opacity: 1; 
 
}

<li><a id="clickme" href="javascript:unhide('about');">click me</a></li> 
 

 
<div id="about" class="hide"> 
 
    <p>lorem ipsum …</p> 
 
</div>

Hier ist eine es Wirkung zeigt.