如何使用具有過渡緩入效果的JavaScript隱藏/顯示div？

Question

這是我的代碼，它隱藏/顯示div ...，但是我想在轉入/隱藏等javascript中隱藏/顯示時具有過渡效果。 如何在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: 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屬性，並在找到它時分配一個click處理程序。 處理程序為目標元素切換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可能會使用以下源代碼： https ： //github.com/jquery/jquery/blob/master/src/effects.js#L107