CSS转换不工作时，改变类javascript

Question

我有一个隐藏的div #about。通过单击链接#clickme,div被一个函数解除隐藏。不幸的是，CSS过渡(不透明度)不工作，虽然它应该保持类。hide和。unhide包括过渡。什么好主意吗?

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

Answer 1

您需要从元素中删除display:none。实际上是用两种方式隐藏了元素，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>

这是一个jsFiddle显示它的动作。