我有一个隐藏的 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> 

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

请您参考如下方法:

您需要删除 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>