2

I tried many times to add a transition to eventBody, but it still not working.

**here's the code:

export function Event({ event }: EventProps) {
  const [showDropDown, setShowDropDown] = useState(false)

  return (
      <div className={styles.eventBody} hidden={!showDropDown}>
        <div className={styles.line}></div>
        <AttendeeList upcoming={true} attenders={attenders}></AttendeeList>
     </div>
  )
}

**CSS:

.eventBody {
  transition: all 0.4s ease-out;
}

.eventBody[hidden='true'] {
  display: none;
}

i tired to setShowDropDown after 100 ms second on every click on the header div, and also tried to use height in transition instead of all but nothing worked

Hossam
  • 367
  • 3
  • 9
  • 1
    `display: none` isn't something that can transition. You have to decide what kind of transition you want and use that instead, like `opacity: 0` or `height: 0` or whatever effect you want. – Guy Incognito Apr 12 '23 at 09:29
  • @GuyIncognito i want to use height but when i tried setting height to 0 it didn't work either – Hossam Apr 12 '23 at 09:35

1 Answers1

2

Your css selector is wrong. Also, display is not an animatable property.

.eventBody {
  transition: all 0.4s ease-out;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.eventBody[hidden] {
  height: 0;
}
Asplund
  • 2,254
  • 1
  • 8
  • 19
  • i want to use height but when i tried setting height to 0 it didn't work either – Hossam Apr 12 '23 at 09:34
  • 1
    You can only animate a fixed height, by default height is set to auto, which you cannot animate. You can however bypass this by using max-height but it's not ideal. If you want a true animation of height you need to calculate the container's height and toggle between it and 0. – Asplund Apr 12 '23 at 09:36