Question

此代码工作正常。

我在这里做的是夸大类活动的最大高度，但我需要的是指定能够以相同速度运行效果的确切高度。

对于这个例子。我没有写动态导航栏，这是缺乏条件但我认为它涵盖了我想要指定的内容。

如果单击w33racle，您将在控制台中看到有一个数字。但是，0不是我需要的值。我希望它是ul.dropdown.active的高度，无论它是否具有.active类

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

任何帮助将不胜感激。感谢

Answer 1

这里的问题是JavaScript在CSS转换完成之前完成。

Look into the "transitionend" event

快速解决方法是删除CSS转换，或添加一个延迟等于CSS转换长度的setTimeout。但是，如果适合，我建议使用transitionend事件。

使用实施示例进行编辑：

＆＃13;

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")
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以通过添加孩子的身高轻松获得它。

利用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>

非jQuery：即使max-height为零也能获得高度

2 个答案: