0

I have a dropdown component which has a button on click on it it opens/closes the list box, i want to make the list to appears slowly with transition, i tried it but nothing works, what is wrong in my code?

      <ul className={clsx("dropdown-options", isOpen && "show")}>
            {options?.map((option: any, index: any) => {
              return (
                <li className={clsx("dropdown-option")}>
                  <span>{option.label}</span>
                </li>
              );
            })}
          </ul>

.dropdown-options {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15em;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  left: 0;
  top: calc(100% + 0.25em);
  z-index: 100;
  display: none;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  &.show {
    display: block;
  }
}

.dropdown-option {
  padding: 0.25em 0.5em;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease,
    padding-left 0.2s ease;
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
TSDev
  • 95
  • 7
  • Please visit the [help], take the [tour] to see what and [ask] - post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Feb 17 '23 at 14:09
  • Also please tag the frameworks. It is not CSS. but perhaps SCSS you have posted. I added clsx – mplungjan Feb 17 '23 at 14:10
  • from display none to block, it's on/off. Display none, element is not rendered in DOM, no transition possible. You should make an intermediate state display none and opacity 0 -> display block opacity 0 -> now you can have a transition – pier farrugia Feb 17 '23 at 15:25

0 Answers0