边框底部的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

转换延迟没有属性。 您需要像这样为border-bottom设置一个不同的类：

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

像添加.collapsed一样，将类添加到addCollapsed函数中

Answer 2

您有两个主要问题：首先，您的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>