边框底部的CSS过渡延迟

Question

I have a traditional ecommerce filter list below. You have can click to filter products by attributes like shoesize, vendor, etc if your buying shoes.

My problem has to do with borders. I have every element set to border:bottom . Look at what the line below "Puma" is doing when you click sample code below.

 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> 

EDIT I made the transitions from 0.5 second to 3 seconds so you can see it easier

Answer 1

transition delay doesn't take an attribute. you need to set up a different class for the border-bottom like this:

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

and add the class to the addCollapsed function like you did .collapsed

Answer 2

You have two main problems: First, your transition-delay value only takes time - no CSS property names. Second, your border-bottom cannot be transitioned from none .

Here's one way of doing things:

 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>