代码之家 › 专栏 › 技术社区 › Vincent Tang

边框底部的css转换延迟

css-transitions animation css html javascript

Vincent Tang · 技术社区 · 7 年前

我下面有一个传统的电子商务过滤列表。如果您购买鞋子,您可以单击以按属性筛选产品,如Shoesize、Vendor等。

我的问题和边界有关。我把每个元素都设置为 border:bottom . 当您单击下面的示例代码时,请查看“puma”下面的行正在做什么。

const headings = Array.from(document.querySelectorAll('.refine__heading'));
const contents = Array.from(document.querySelectorAll('.refine__content'));
headings.forEach(heading => heading.addEventListener('click', addCollapsed));

function addCollapsed(e){
  e.target.nextElementSibling.classList.toggle('collapsed');
}

/* Reset */
ul {
  list-style-type: none;
  padding: 0;
}
/* Actual Notes */
.refine {
  width: 200px;
  border: 1px solid black;
}
.refine__heading {
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dadbd9;
  padding-left: 5px;
  padding-right: 5px;
}
.refine__content {
  overflow: hidden;
  transition: max-height 3s ease-out;
  height: auto;
  max-height: 100px;
  border-bottom: 1px solid #dadbd9; /* important */
}
.refine label {
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
  padding-right: 5px;
}
.collapsed {
  max-height: 0px;
  border-bottom: none; /* important */
  transition-delay: border-bottom 3s; /* I CANT FIGURE THIS PART OUT*/
  transition: max-height 3s ease-out;
}

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<ul class="refine">
  <li class="refine__section">
    <div class="refine__heading"><span class="refine__heading-content">Vendors</span><i class="fas fa-caret-down"></i></div>
    <div class="refine__content">
      <label><span class="refine__item">Nike</span><span class="count">4</span></label>
      <label><span class="refine__item">Adidas</span><span class="count">5</span></label>
      <label><span class="refine__item">Puma</span><span class="count">6</span></label>
    </div>
  </li>
  <li class="refine__section">
    <div class="refine__heading"><span class="refine__heading-content">Shoe Size</span><i class="fas fa-caret-down"></i></div>
    <div class="refine__content">
      <label><span class="refine__item">Large</span><span class="count">4</span></label>
      <label><span class="refine__item">Medium</span><span class="count">5</span></label>
      <label><span class="refine__item">Small</span><span class="count">6</span></label>
    </div>
  </li>
</ul>

编辑我做了从0.5秒到3秒的转换,这样你可以更容易地看到

2 回复 | 直到 7 年前

BCDeWitt 7 年前

你有两个主要问题: 首先,你的 transition-delay 值只需要时间-没有css属性名。第二,你的 border-bottom 无法从转换 none .

有一种方法:

const headings = Array.from(document.querySelectorAll('.refine__heading'));
const contents = Array.from(document.querySelectorAll('.refine__content'));
headings.forEach(heading => heading.addEventListener('click', addCollapsed));

function addCollapsed(e){
  e.currentTarget.nextElementSibling.classList.toggle('collapsed');
}

/* Reset */
ul {
  list-style-type: none;
  padding: 0;
}
/* Actual Notes */
.refine {
  width: 200px;
  border: 1px solid black;
}
.refine__heading {
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dadbd9;
  padding-left: 5px;
  padding-right: 5px;
}
.refine__content {
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  height: auto;
  max-height: 100px;
  border-bottom: 1px solid #dadbd9; /* important */
}
.refine label {
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
  padding-right: 5px;
}
.collapsed {
  max-height: 0px;

  /* CHANGED FROM HERE DOWN */
  border-bottom-width: 0; /* important */
  transition-property: max-height, border-bottom-width;
  transition-duration: 0.3s;
  transition-delay: 0, 2s;
  transition-timing-function: ease-out;
}

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<ul class="refine">
  <li class="refine__section">
    <div class="refine__heading"><span class="refine__heading-content">Vendors</span><i class="fas fa-caret-down"></i></div>
    <div class="refine__content">
      <label><span class="refine__item">Nike</span><span class="count">4</span></label>
      <label><span class="refine__item">Adidas</span><span class="count">5</span></label>
      <label><span class="refine__item">Puma</span><span class="count">6</span></label>
    </div>
  </li>
  <li class="refine__section">
    <div class="refine__heading"><span class="refine__heading-content">Shoe Size</span><i class="fas fa-caret-down"></i></div>
    <div class="refine__content">
      <label><span class="refine__item">Large</span><span class="count">4</span></label>
      <label><span class="refine__item">Medium</span><span class="count">5</span></label>
      <label><span class="refine__item">Small</span><span class="count">6</span></label>
    </div>
  </li>
</ul>

Lukas Sorensen 7 年前

转换延迟不带属性。您需要为边框底部设置一个不同的类,如下所示:

.hide-border-bottom{
  transition: border-bottom 0.3s ease-out;
  transition-delay: 0.4s;
}

并像您那样将类添加到addCollapsed函数中。