如何使用javascript隐藏/显示div，并使其具有易于转换的效果？

这是我隐藏/显示div的代码…但我希望在javascript中隐藏/显示时有转换效果，比如ease-in-out。如何在javascript中实现这一点

function showHide(shID) {

    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
                document.getElementById(shID).style.display = 'block';
                window.scrollTo(0, 2346);
            }
        else {

            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';

        }
    }
}

---

正如已经指出的，如果您希望以标准方式进行转换，那么您应该使用CSS3转换，这也不会因为高维护而造成很多麻烦

但是，问题是您试图在没有可量化过渡值的属性上使用过渡。

显示：块之间没有中间地带和
显示：无宽度
或
高度
之类的属性是合适的，但您也可以在
不透明度
、
左侧
、
顶部
等上使用它（因此基本上任何具有数值的属性）

此CSS用于从顶部淡入和滑出文档的元素

.panel {
    position: absolute;
    top: 0px;
    opacity: 0;
    -moz-transition: opacity .25s ease-in-out , top .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out , top .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out , top .25s ease-in-out;
    transition: opacity .25s ease-in-out , top .25s ease-in-out;
}
.panel.show {
    top: 50px;
    opacity: 100;
}

下面是一个Javascript，它遍历元素，检查
数据切换
属性，并在找到该属性时分配一个单击处理程序。处理程序切换目标元素的
show
类

function toggleElem(evt) {
    var cn = 'show';
    var panel = document.getElementById(evt.target.getAttribute('data-toggle'));
    var classes = panel.className.split(/\s+/);
    var x = classes.indexOf(cn);

    if(x >= 0)
        { classes.splice(x,1); }
    else
        { classes.push(cn); }

    panel.className = classes.join(' ');
}

var elems = document.body.getElementsByTagName('*');

for(var i=0,l=elems.length;i<l;i++) {
    var elem = elems[i];
    var toggle = elem.getAttribute('data-toggle');

    if(toggle !== null)
        { elem.addEventListener('click',toggleElem,false); }
}

功能切换元素（evt）{
var cn=‘show’；
var panel=document.getElementById（evt.target.getAttribute（'data-toggle'）；
var classes=panel.className.split（/\s+/）；
var x=类别指数（cn）；
如果（x>=0）
{classes.splice（x，1）；}
其他的
{classes.push（cn）；}
panel.className=classes.join（“”）；
}
var elems=document.body.getElementsByTagName（'*'）；
对于（var i=0，l=elems.length；i我不确定为什么不使用CSS3转换

但要严格遵守javascript，以下源代码可能会有所帮助：
查看
jquery
。已经有很多关于效果的内容。我想要纯javascript代码中的效果。使用jquery会与我的其他函数冲突，因此我无法使用它。你看过css3转换吗？
<input type="button" data-toggle="foo" value="Toggle"/>
<div id="foo" class="panel">
    <p>This is a transitioned panel.</p>
</div>