我有一个隐藏的 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
<script>
function unhide(divID) {
var element = document.getElementById(divID);
if (element) {
element.className=(element.className=='hide')?'hide unhide':'hide';
}
}
</script>
您需要删除display:none
来自元素。您本质上是通过两种方式隐藏元素 -display:none
and 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 http://jsfiddle.net/brettdewoody/bpob0hLb/显示它的动作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)