边界底部的CSS过渡延迟

Question

我在下面有一个传统的电子商务过滤器列表。如果您购买鞋子，您可以点击按鞋类，供应商等属性过滤产品。

我的问题与边界有关。我将每个元素设置为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秒进行了转换，因此您可以更轻松地看到它

Answer 1

转换延迟不带属性。你需要为这样的边框底部设置一个不同的类：

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

并将类添加到addCollapsed函数中，就像你执行.collapsed

一样

Answer 2

您有两个主要问题： 首先，您的transition-delay值只需要时间 - 没有CSS属性名称。 其次，您的border-bottom无法从none过渡。

这是一种做事方式：

＆＃13;

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;