html - 试图让 Accordion 折叠打开速度变慢

Question

我试图让 Accordion 可折叠下拉菜单打开得慢一点，现在它会立即打开。一直在尝试查找有关如何使用我已有的代码来完成此操作的在线 Material 。网上好像找不到任何东西。

任何下拉缓慢，只是想学习如何实现代码。

.so-accordion-wrapper {
    padding-top: 2.5rem;
    overflow: visible;
    border-bottom: 1px solid #eaeaea;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 820px;
}

.so-tab {
    position: relative;
    width: 100%;
    border-top: 1px solid #eaeaea;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

.so-tab label {
    position: relative;
    display: block;
    padding: 0 25px 0 0;
    margin-bottom: 15px;
    margin-top: 15px;
    line-height: normal;
    cursor: pointer;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 12px;
}

.so-tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.so-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s;
}

/* :checked */
.so-tab input:checked ~ .so-tab-content {
    max-height: none;
}

/* Icon */
.so-tab label::after {
    position: absolute;
    right: 0;
    top: -5px;
    font-size: 1.5em;
    color: #959595;
    display: block;
    -webkit-transition: all 0.50s ease;
  -moz-transition: all 0.50s ease;
    -o-transition: all 0.50s ease;
    transition: all 0.50s ease;
}

.so-tab input[type=checkbox] + label::after {
    content: "+";
}

.so-tab input[type=radio] + label::after {
    content: "\25BC";
}

.so-tab input[type=checkbox]:checked + label::after {

  transform: rotate(315deg);
}

.so-tab input[type=radio]:checked + label::after {
    transform: rotateX(180deg);
}

<div class="so-accordion-wrapper">
  <div class="so-tab"><input id="so-tab-1" type="checkbox" name="tabs"> <label for="so-tab-1">INGREDIENTS</label>
    <div class="so-tab-content">
      <p>Yes</p>
    </div>
  </div>
  <div class="so-tab"><input id="so-tab-2" type="checkbox" name="tabs"> <label for="so-tab-2">PRECAUTION</label>
    <div class="so-tab-content">
      <p>No</p>
    </div>
  </div>
</div>

Answer 1

正如您在评论中所问的那样，这就是我的意思:

首先，您需要的唯一更改是为 max-height 指定一个值 - “none”不起作用。

您已经解决了在 CSS 中向上/向下滑动时的常见问题 - 无法转换 height - 通过使用可用于转换的 max-height 。但是，它需要一个值才能使转换起作用，不幸的是 none 不起作用，因为浏览器无法计算没有值的转换所需的值。

仅供引用，也无需更改transition-timing-function(例如ease、ease-in-out、cubic-bezier)或向打开的 div 添加过渡(这实际上不会在代码中执行任何操作)。

我提到的问题是，向下滑动 Action 的发生速度比您指定的时间快得多，即 0.35s - 您可以更清楚地看到它，如果你将其设置为例如1s。向上滑动 Action 需要更长的时间，就好像它花费了正确的时间一样。请参阅示例:

.so-accordion-wrapper {
    padding-top: 2.5rem;
    overflow: visible;
    border-bottom: 1px solid #eaeaea;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 820px;
}

.so-tab {
    position: relative;
    width: 100%;
    border-top: 1px solid #eaeaea;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

.so-tab label {
    position: relative;
    display: block;
    padding: 0 25px 0 0;
    margin-bottom: 15px;
    margin-top: 15px;
    line-height: normal;
    cursor: pointer;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 12px;
}

.so-tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.so-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
}

/* :checked */
.so-tab input:checked ~ .so-tab-content {
    max-height: 1000px;
}

/* Icon */
.so-tab label::after {
    position: absolute;
    right: 0;
    top: -5px;
    font-size: 1.5em;
    color: #959595;
    display: block;
    -webkit-transition: all 0.50s ease;
  -moz-transition: all 0.50s ease;
    -o-transition: all 0.50s ease;
    transition: all 0.50s ease;
}

.so-tab input[type=checkbox] + label::after {
    content: "+";
}

.so-tab input[type=radio] + label::after {
    content: "\25BC";
}

.so-tab input[type=checkbox]:checked + label::after {

  transform: rotate(315deg);
}

.so-tab input[type=radio]:checked + label::after {
    transform: rotateX(180deg);
}

<div class="so-accordion-wrapper">
  <div class="so-tab"><input id="so-tab-1" type="checkbox" name="tabs"> <label for="so-tab-1">INGREDIENTS</label>
    <div class="so-tab-content">
      <p>Yes</p>
    </div>
  </div>
  <div class="so-tab"><input id="so-tab-2" type="checkbox" name="tabs"> <label for="so-tab-2">PRECAUTION</label>
    <div class="so-tab-content">
      <p>No</p>
    </div>
  </div>
</div>

原因是下滑的时间是根据您设置的最大高度计算的 - 例如上例中的 1000px。所以向下滑动 1000px 需要整整 1 秒，但你的实际 div 并没有那么大，所以它看起来要快得多。

仅供引用，上滑部分也发生了同样的情况，但看起来速度较慢，因为几乎需要一整秒才能到达所显示的 1000px 的“顶部”。

解决这个问题的方法是:

• 使用更合适的max-height，例如如果你知道你的 div 永远不会大于 100px；，然后将其设置为最大高度 - 请参阅下面的示例。
• javascript(除非必要，否则应避免使用，并且上述选项对您来说是 Not Acceptable - 添加到客户端的处理越多，页面加载速度就越慢 - 这对用户和 Google 都不利)。

使用更合适的 max-height 的示例:max-height: 100px - 您可以看到向下滑动现在更接近您指定的 1 秒时间。

.so-accordion-wrapper {
    padding-top: 2.5rem;
    overflow: visible;
    border-bottom: 1px solid #eaeaea;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 820px;
}

.so-tab {
    position: relative;
    width: 100%;
    border-top: 1px solid #eaeaea;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

.so-tab label {
    position: relative;
    display: block;
    padding: 0 25px 0 0;
    margin-bottom: 15px;
    margin-top: 15px;
    line-height: normal;
    cursor: pointer;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 12px;
}

.so-tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.so-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
}

/* :checked */
.so-tab input:checked ~ .so-tab-content {
    max-height: 100px;
}

/* Icon */
.so-tab label::after {
    position: absolute;
    right: 0;
    top: -5px;
    font-size: 1.5em;
    color: #959595;
    display: block;
    -webkit-transition: all 0.50s ease;
  -moz-transition: all 0.50s ease;
    -o-transition: all 0.50s ease;
    transition: all 0.50s ease;
}

.so-tab input[type=checkbox] + label::after {
    content: "+";
}

.so-tab input[type=radio] + label::after {
    content: "\25BC";
}

.so-tab input[type=checkbox]:checked + label::after {

  transform: rotate(315deg);
}

.so-tab input[type=radio]:checked + label::after {
    transform: rotateX(180deg);
}

<div class="so-accordion-wrapper">
  <div class="so-tab"><input id="so-tab-1" type="checkbox" name="tabs"> <label for="so-tab-1">INGREDIENTS</label>
    <div class="so-tab-content">
      <p>Yes</p>
    </div>
  </div>
  <div class="so-tab"><input id="so-tab-2" type="checkbox" name="tabs"> <label for="so-tab-2">PRECAUTION</label>
    <div class="so-tab-content">
      <p>No</p>
    </div>
  </div>
</div>

在这种情况下，这可能不是什么大问题，因为 0.35 秒已经相当快了，但这是需要记住的非常重要的一点，因为它在其他情况下可能会产生更大的影响。