CODEWITHSUNDEEP
htmlcss
Jess Y.
Jess Y.

Reputation: 77

Why is my ease transition in CSS not working?

I need some help if anyone is able to look over my code. So I applied an ease-in-out transition on max-height of my hover menu. At first it was working but suddenly, it isn't anymore.

I remember reading up through other Stack Overflow answers and have tried applying the transition on the parent, rather than hover. What I think could be the solution is that I'd have to apply the transition by navigating through dropdown-menu, then div.header, row, column...just to get to the menu itself. I could be wrong. What I want to do is to have the hover menu scroll down and be able to scroll back up with ease when the cursor leaves the menu.

<div class="dropdown">
  <a href="https://wovenmagazine.com/shop/" id="quick-shop" class="dropdown-toggle" data-toggle="dropdown">Shop</a><ul class="dropdown-menu">
    <div class="header">
      <div class="row">
      <div class="column">
        <li><a href="#"><img src ="https://icon-library.net/images/icon-cute/icon-cute-0.jpg"></a></li></div>
      <div class="column">
      <li><a href="#">Action</a></li>
        </div>
      <div class="column">
      <li><a href="#">Action</a></li></ul></ul>
    </div>
    </div>
  </div>
  </div>

.dropdown-toggle {
  position: absolute;
  display: inline-block;
  top: -38px;
  /*not the best solution but will do for now..*/


}

.dropdown-menu {
  width: 100%;
  left: 0;
  top: -20px;
  /*not the best solution but will do for now.. */
  max-height:0em;
  overflow:hidden;
  position: absolute;
  background-color: white;
  transition: max-height all 6s ease-in-out;
  z-index: 1;
  opacity: 0.9;
}

ul.dropdown-menu  div.header li {
    transition: max-height all 6s ease-in-out;
/* ^^ this is obviously wrong, but I'm trying to navigate to the li elements*/

}
.dropdown {
    /** Make it fit tightly around it's children */
  top: 0;
  z-index: 128;
  font-family: 'p22-underground', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
}

.dropdown:hover .dropdown-menu {
    /** Show dropdown menu */
  max-height: 600px;
  display: block;
   color: white;
   width: 100%;
  font-family: 'p22-underground', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  padding-bottom: 100%;
} 

.dropdown > ul > li {
  left: 0;
  right: 0;
} 

.dropdown-menu .header {
  padding: 16px;
  color: white;
  background-color: grey;
}

Upvotes: 1

Views: 227

Answers (1)

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

You had 2 main issues on your code :

  1. you had syntax mistake on your transition ... you set transition-property to max-heigth then you added all after it which is the spot transition-duration... you should remove max-height and leave all only because you have padding + height transitions.

  2. on the hover class ... you were setting the padding-bottom to 100% but you didn't include that on your transition which will trigger the animation immediately you should either replace your transition property max-height to all or just remove the padding affect because it has no perpose.

Here is a snippet you can run below: 

.dropdown-menu {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: white;
  transition: max-height 1s ease-in-out;
  opacity: 0.4;
}

.dropdown {
  font-weight: 100;
  text-transform: uppercase;
}

.dropdown:hover .dropdown-menu {
  /** Show dropdown menu */
  max-height: 250px;
  font-weight: 100;
  text-transform: uppercase;
}

.dropdown>ul>li {
  left: 0;
  right: 0;
}

.dropdown-menu .header {
  padding: 16px;
  color: white;
  background-color: grey;
}
<div class="dropdown">
  <a href="https://wovenmagazine.com/shop/" id="quick-shop" class="dropdown-toggle" data-toggle="dropdown">Show the lovely cute bear</a>
  <ul class="dropdown-menu">
    <div class="header">
      <div class="row">
        <div class="column">
          <li>
            <a href="#"><img src="https://icon-library.net/images/icon-cute/icon-cute-0.jpg"></a>
          </li>
        </div>
        <div class="column">
          <li><a href="#">Action</a></li>
        </div>
        <div class="column">
          <li><a href="#">Action</a></li>
       </ul>
     </ul>
  </div>
  </div>
  </div>
</div>

Upvotes: 1

Related Questions