2

I set a div of a dropdown to have an animation as below and this happens when div opens up:

.locationDropdownList {
  position: absolute;
  top: 83px;
  width: 100%;
  background: white;
  z-index: 1000;
  padding: 0 1rem 1rem 1rem;
  animation: dropdown 250ms ease-in-out;
  box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
  max-height: 250px;
  overflow-x: hidden;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

It works when it opens but how can I also set it when it is closing? I tried adding 0% underneath 100% but that didn't do anything. Any suggestions on this?

Update:

So how it works is like below

I have a parent of the div called LocationDropdown and when that is clicked, a class called focused is applied to the parent which then activates the dropdown to open locationDropdownList which is a div that holds the list

<div class="LocationDropdown">
  <div>
    <p class="locationSelectText">London</p>
  </div>
</div>

when clicked focused class is applied

<div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>
drifterOcean19
  • 372
  • 5
  • 24
  • 1
    a simple transition will work fine. it needs to be set on the default style if you add a class (or on :hover/:focus/:active selectors) to open up your div. How do you do that switch of style ? Can you clarify your question ? as the code is shown, nothing tells how this style is applied – G-Cyrillus Apr 10 '19 at 08:34
  • I tried that and applied to a transition on max-height to the div that holds the list and it didn't work and I have no idea why. – drifterOcean19 Apr 10 '19 at 08:57
  • here is what i meant with transition and opacity https://codepen.io/anon/pen/LvWWOr or max-height http://dabblet.com/gist/5286471 ;) – G-Cyrillus Apr 10 '19 at 11:30
  • @G-Cyr I tried you solution - it's not applying transition at all but when I inspected and turn opacity on and off it's doing what I want – drifterOcean19 Apr 10 '19 at 14:26

1 Answers1

3

Is this your mean?

.locationDropdownList {
  position: absolute;
  top: 83px;
  width: 100%;
  background: white;
  z-index: 1000;
  padding: 0 1rem 1rem 1rem;
  animation: dropdown 1s ease-in-out infinite;
  box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.2);
  max-height: 250px;
  overflow-x: hidden;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }
  
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
<div class="LocationDropdown focused">
  <div>
    <p class="locationSelectText">London</p>
  </div>
  <div class="locationDropdownList">
    <ul>
      <li></li>
       .....
       .....
      </ul>
    <ul>
      <li></li>
      .....
      .....
    </ul>
    <ul>
      <li></li>
       .....
       .....
    </ul>
  </div>
</div>
Arthur
  • 47
  • 4