CSS 3動畫沒有執行第一次被稱爲

所以...我有這個小網頁有兩個div，一個按鈕，兩個css類和一個javascript函數。CSS 3動畫沒有執行第一次被稱爲

這個想法是，當按下按鈕時，該功能改變了div的css類，並用一個漂亮的轉換隱藏它。當再次按下它，它的opossite：

的HTML：

<div id="div1" > 
    <div id="div2" > 
    Here be HTML stuffs. 
    </div> 
</div>

的JavaScript：

hideNShow(){ 

    var w = $('#div2'); 
    var height = w.outerHeight();  

    if(document.getElementById("div1").className=="hidden") 
     document.getElementById("div1").className="visible"; 
     document.getElementById("div1").style.height=height + "px"; 
    } else if (document.getElementById("div1").className=="visible") { 
     document.getElementById("div1").className="hidden"; 
     document.getElementById("div1").style.height=0 + "px"; 
    } 
}

而CSS類：

.visible { 
    visibility: visible; 
    opacity: 1; 
    transition: all 1s ease; 
} 
.hidden { 
    visibility: hidden; 
    opacity: 0; 
    height:0; 
    overflow: hidden; 
    transition: all 1s ease; 
}

按鈕只是在不同div中引用該功能的按鈕。

我現在的問題是，如果div1具有「隱藏」作爲起始類（），它工作得很好（所有的轉換按照預期的延遲按預期工作），但是如果起始類是「可見的」第一次按下按鈕時，div會自動隱藏，忽略轉換。

我環顧四周，什麼都沒發現。看來，第一個

編輯：修復了一個名稱爲div的代碼上的錯字。

來源

2015-05-29 Neuromante

你似乎缺少這一行'的document.getElementById（「格」）style.height =身高+ 「PX」正確的'id';'因爲它無法找到一個帶有'id = div'的元素 –

您可以使用jQuery for div2，但爲div1選擇普通的JS。這很有趣:) – Anarion

你應該有一些默認的高度。將'height：auto'添加到'visible'類並檢查。而且看起來你沒有默認的任何課程。 –

嘗試刪除可見性：隱藏和可見性：可見

來源

2015-05-29 09:40:42 gopalraju

沒有。沒有工作。雖然div的行爲與以前完全一樣。 .. – Neuromante

最重要的，條件如果...的className = = '可見';否則如果... className =='hidden'不工作，因爲＃div1沒有任何這些類。

但無論如何，第一回合的動畫將無法正常工作（元素將立即消失）。原因在於，在將.hidden類應用於重設高度爲0之前，您必須明確設置＃div1的高度，而僅當元素具有CSS參數更改時，過渡才起作用。

在點擊時設置高度時，在添加.hidden類之前還有一個問題 - 它不會再次轉換。這與第三段from here中描述的問題相似。

function init() { 
 
    var div1 = document.getElementById('div1'); 
 
    div1.style.height = div1.clientHeight + 'px'; 
 
    
 
    function hideNShow(){  
 
     if (div1.className.split(' ').indexOf('hidden') < 0) { 
 
      div1.className += ' hidden'; 
 
     } 
 
     else { 
 
      div1.className = div1.className.replace(/(?:^|\s)hidden(?!\S)/g , ''); 
 
     } 
 
    } 
 
    document.getElementById('switch').addEventListener('click', hideNShow); 
 
} 
 
init();

.smooth { 
 
    transition: all 1s ease; 
 
} 
 

 
/*.visible { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: all 1s ease; 
 
}*/ 
 

 
.hidden { 
 
    /*visibility: hidden;*/ 
 
    height: 0 !important; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    /*transition: all 1s ease;*/ 
 
}

<button id="switch" style="margin-bottom:20px;">Switch</button> 
 

 
<div id="div1" class="smooth" style="background:#F9E6C1;"> 
 
    <div id="div2" > 
 
    Here be HTML stuffs. 
 
    </div> 
 
</div>

來源

2015-05-30 06:43:11

CSS 3動畫沒有執行第一次被稱爲

回答

相關問題