CSS transition does not work when changing class to javascript

I have a hidden div #about. By clicking on the #clickme link, the div becomes an invisible function. Unfortunately, CSS transition (opacity) does not work, although it should contain both .hide and .unhide classes, including transitions. Any ideas?

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> 
+6
source share
1 answer

You need to remove display:none from the element. You essentially hide the path element 2 - display:none and opacity:0 .

If you remove display:none and go only the opacity property, the effect will work.

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> 

Here is a jsFiddle showing its effect.

+3
source

Source: https://habr.com/ru/post/969576/


All Articles