Переход CSS не работает при смене класса по javascript

У меня есть скрытый div #about. Нажимая на ссылку #clickme, div становится невидимым функцией. К сожалению, переход CSS (непрозрачность) не работает, хотя он должен содержать оба класса .hide и .unhide, включая переходы. Есть идеи?Переход CSS не работает при смене класса по javascript

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>

источник

2014-05-20 user3656519

Я думаю, причина в том, почему это не работает, потому что вы не можете переходить с объекта на экран: none; для отображения: inline или block и т. д. ... –

попробуйте поставить '! important' в свойствах класса unhide. но свойство отображения не будет работать с переходом, поэтому вместо этого используйте ширину или высоту. –

Вы должны удалить display:none из элемента. Вы по существу скрываете элемент 2 пути - display:none и opacity:0.

Если вы удалите display:none и перейдете только к собственности opacity, эффект будет работать.

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>

Вот показывая его действие.

источник

2015-01-03 19:46:11

Переход CSS не работает при смене класса по javascript

ответ

Смежные вопросы