Question

这是我隐藏/显示div的代码...但是我想在javascript中隐藏/显示过渡效果，如easy-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';

        }
    }
}

Answer 1

正如已经指出的那样，如果你想以标准的方式做到这一点，你应该使用CSS3过渡，这也不会因为高维护而导致很多麻烦。

但是，问题在于您尝试在没有可量化过渡值的属性上使用转换。 display: block;和display: none;之间没有中间地带，因此您必须使用具有过渡值的内容。通常，width或height等属性是合适的，但您也可以在opacity，left，top等处使用它（所以基本上都是具有数值的属性）。

此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，检查data-toggle属性，并在找到它时分配一个点击处理程序。处理程序切换目标元素的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); }
}

示例HTML。

<input type="button" data-toggle="foo" value="Toggle"/>
<div id="foo" class="panel">
    <p>This is a transitioned panel.</p>
</div>

由于您将使用opacity而不是display这一事实，您可能会遇到阻碍您要切换的元素，尽管不可见，但仍然存在于光标中被关注到。然后，除了执行类更改之外，您可能还需要使用setTimeout()来更改display值，以防止转换后的元素在隐藏时捕获输入。

Answer 2

我不确定，为什么你没有使用CSS3过渡。

但要严格保持javascript javascript可能这个源代码很有帮助： https://github.com/jquery/jquery/blob/master/src/effects.js#L107

如何使用带有过渡缓入效果的javascript隐藏/显示div？

2 个答案: