如何隱藏/顯示使用JavaScript與轉換緩出效應的div？

這是我的代碼，它隱藏/顯示div ...但我想要過渡效果，同時隱藏/顯示在JavaScript中像緩進出。如何在JavaScript中實現這一點？如何隱藏/顯示使用JavaScript與轉換緩出效應的div？

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'; 

     } 
    } 
}

來源

2014-04-01 suman

查找到'jquery'。已經有很多效果。 – Aashray

我想要純JavaScript代碼。使用jQuery它衝突我的其他功能，所以我不能使用它。 – suman

你看過css3過渡嗎？ – jing3142

正如已經指出的那樣，你應該，如果你想做到這一點的也不會造成因爲高額的維護很麻煩的標準方式使用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; 
}

下面是經過的元素，對於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值，除了執行類更改以防止轉移元素在隱藏時捕獲輸入。

來源

2014-04-01 12:15:50

我不確定，爲什麼不使用CSS3轉換。

但要保持它的所有的JavaScript嚴格大概這個源代碼是有幫助的： https://github.com/jquery/jquery/blob/master/src/effects.js#L107

來源

2014-04-01 12:18:39 kampfkuchen

「我想用純JavaScript代碼。」 –

如何隱藏/顯示使用JavaScript與轉換緩出效應的div？

回答

相關問題