时间戳

首页 > 解决方案 > 试图让手风琴可折叠打开更慢

html - 试图让手风琴可折叠打开更慢

问题描述

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

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

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

标签： htmlcss

解决方案

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

首先，您需要的唯一更改是给出max-height一个值 - “无”不起作用。

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

仅供参考，也无需更改transition-timing-function（例如ease, ease-in-out, cubic-bezier）或向打开的 div 添加过渡（实际上在您的代码中没有做任何事情）。

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

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

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

仅供参考，上滑时也会发生同样的情况，但它看起来更慢，因为它几乎需要整整一秒才能到达正在显示的 1000px 的“顶部”。

解决这个问题的方法是：

  • 使用更合适的max-height，例如，如果您知道您的 div 永远不会大于 100px；然后将其设置为您的最大高度 - 请参见下面的示例。
  • javascript（除非必要并且上述选项对您来说是不可接受的，否则应避免使用 - 您添加到客户端的处理越多，页面加载速度越慢 - 这对用户和 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 秒都相当快，但总的来说，这是一个非常重要的要记住的点，因为它在其他情况下可能会产生更大的影响。

推荐阅读