动画最大高度，其他元素滞后答案

【问题标题】：Animate Max Height, other elements lag动画最大高度，其他元素滞后
【发布时间】：2019-05-10 15:53:05
【问题描述】：

我正在尝试扩展ul 的最大高度。当 max-height 属性改变时（通过切换一个类，高度会立即改变，但ul 下的元素应该尊重动画高度。

var expander = $('.skill-expand');
var skillsUl = $('.skills-list');
expander.on('click', function() {
  skillsUl.toggleClass('unexpanded');
  if (skillsUl.hasClass('unexpanded')) {
    expander.html('<span class="fa fa-chevron-down">..\/..</span>');
  } else {
    expander.html('<span class="fa fa-chevron-up">../\..</span>');
  }
  return false;
});

.skills-list {
  margin: 0;
  padding: 0;
  transition: max-height 1s ease-in-out;
  max-height: 800px;
  /*effectively auto*/
}

.skill-expand {
  margin: auto;
  text-align: center;
  display: block;
}

.skills-list.unexpanded {
  max-height: 60px;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="skills-list unexpanded">
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
</ul>

<a href="#" class="skill-expand"><span class="fa fa-chevron-up">..\/..</span></a>

https://jsfiddle.net/ubgmshzo/

当点击 ..\/.. 扩展器文本时，请注意扩展器元素向下移动之间的延迟。这是有原因的吗？

【问题讨论】：

标签： jquery css animation css-transitions

【解决方案1】：

使用 jQuery UI toggleClass 您可以指定 duration 并使用 promise 触发上/下 V 形的切换。

var expander = $('.skill-expand');
var skillsUl = $('.skills-list');

expander.on('click', function() {
  skillsUl.toggleClass('unexpanded', 1000).promise().done(function() {
    if (skillsUl.hasClass('unexpanded')) {
      expander.find('span').removeClass('fa-chevron-down');
      expander.find('span').addClass('fa-chevron-up');
    } else {
      expander.find('span').removeClass('fa-chevron-up');
      expander.find('span').addClass('fa-chevron-down');
    }
  });

  return false;
});

.skills-list {
  margin: 0;
  padding: 0;
  max-height: 800px;
  /*effectively auto*/
}

.skill-expand {
  margin: auto;
  text-align: center;
  display: block;
}

.skills-list.unexpanded {
  max-height: 60px;
  overflow: hidden;
}

.fa-chevron-up:before {
  content: "..\\/..";
}

.fa-chevron-down:before {
  content: "../\\..";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ul class="skills-list unexpanded">
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
  <li class="skill-rating">Developers developers</li>
</ul>

<a href="#" class="skill-expand"><span class="fa fa-chevron-up"></span></a>

我还将 span fa-chevron-up 和 fa-chevron-down 移动到 CSS 中，以便于切换而不是覆盖 HTML。

【讨论】：