非jQuery：最大高さがゼロの場合でも高さを取得

Question

このコードは正常に動作しています。

私がここでやっていることは、クラスアクティブの最大高さを誇張していますが、私が必要とするのは、同じスピードでエフェクトを実行できる正確な高さを指定することです。

この例では、私は動的なnavbarを書いていない、これは状態の欠如ですが、私はそれが指定したいものをカバーしていると思います。

w33racleをクリックすると、コンソールに数字が表示されます。しかし、0は必要な値ではありません。私はそれが任意の助けをいただければ幸いにかかわらず、それは

let test_clicker = document.getElementById('testClicker'); 
 

 
test_clicker.onclick = (e) => { 
 
    let self = e.target || e.srcElement, 
 
     s_s = self.nextElementSibling.classList; 
 
    
 
    s_s.contains('active') ? s_s.remove('active') : s_s.add('active'); 
 
    
 
    console.log(self.nextElementSibling.clientHeight); 
 
}

.dropdown { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: all 0.3s ease-in-out; } 
 

 
.dropdown.active { 
 
    max-height: 500px; }

<ul> 
 
    <li> 
 
    <a id="testClicker">w33racle</a> 
 
    <ul class="dropdown"> 
 
     <li><a>This</a><li> 
 
     <li><a>is</a><li> 
 
     <li><a>for</a><li> 
 
     <li><a>sample</a><li> 
 
     <li><a>only</a><li> 
 
    </ul> 
 
    </li> 
 
</ul>

.activeクラスを持っているかどうかのul.dropdown.activeの高さになりたいです。ありがとう

Answer 1

あなたは簡単に子供の高さを追加することによって、それを得ることができます。

JavaScriptがあなたに与えたものを利用してください。この場合、animationendは必要ありません。

let test_clicker = document.getElementById('testClicker'), 
 
    thisIsTheHeight = 0; 
 

 
test_clicker.onclick = (e) => { 
 
    thisIsTheHeight = 0; 
 
    let self = e.target || e.srcElement, 
 
     s_s = self.nextElementSibling.classList; 
 
    
 
    s_s.contains('active') ? s_s.remove('active') : s_s.add('active'); 
 
    
 
    [].forEach.call(self.nextElementSibling.children, (elem) => { 
 
    thisIsTheHeight += elem.clientHeight; 
 
    }); 
 
    
 
    console.log(thisIsTheHeight); 
 
}

.dropdown { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: all 0.3s ease-in-out; } 
 

 
.dropdown.active { 
 
    max-height: 500px; }

<ul> 
 
    <li> 
 
    <a id="testClicker">w33racle</a> 
 
    <ul class="dropdown"> 
 
     <li><a>This</a><li> 
 
     <li><a>is</a><li> 
 
     <li><a>for</a><li> 
 
     <li><a>sample</a><li> 
 
     <li><a>only</a><li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

ここでの問題は、CSSトランジションが終了する前にJavaScriptが終了することです。

Look into the "transitionend" event

クイック・フィックスは、CSSの遷移を削除するか、CSS遷移の長さに等しい遅延でのsetTimeoutを追加することのいずれかであろう。しかし、もしそれが適切であれば、transitionendイベントの使用をお勧めします。実装例で

EDIT：

let test_clicker = document.getElementById('testClicker'); 
 

 
test_clicker.onclick = (e) => { 
 
    let self = e.target || e.srcElement, 
 
     s_s = self.nextElementSibling.classList; 
 
    
 
    s_s.contains('active') ? s_s.remove('active') : s_s.add('active'); 
 

 
} 
 

 
document.querySelectorAll("ul.dropdown").forEach(function(element){ 
 
    element.addEventListener("transitionend", function(){ 
 
    console.log(element.clientHeight); 
 
    console.log("transition ended") 
 
    }); 
 
});

.dropdown { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: all 0.3s ease-in-out; } 
 

 
.dropdown.active { 
 
    max-height: 500px; }

<ul> 
 
    <li> 
 
    <a id="testClicker">w33racle</a> 
 
    <ul class="dropdown"> 
 
     <li><a>This</a><li> 
 
     <li><a>is</a><li> 
 
     <li><a>for</a><li> 
 
     <li><a>sample</a><li> 
 
     <li><a>only</a><li> 
 
    </ul> 
 
    </li> 
 
</ul>