CODEWITHSUNDEEP
csscss-transitions
user7558372
user7558372

Reputation:

Transition on menu open/close

I create this very simple layout in which there are a button that user can click to open and close the menu.

I try to add a CSS transition when menu is opening/closing but it seems not to work.

This is the div that should be use the transition:

<div className={`${isMenuOpen ? "w4" : "w-0"} bg-yellow transition`} />

.transition {
  transition: all 1.5s ease;
}

Why?

Upvotes: 1

Views: 1496

Answers (1)

aze&#243;s
aze&#243;s

Reputation: 4901

The problem is that .w-0 doesn't have a defined width. The transition property needs an initial value to transition from.

Just add this to your CSS file:

.w-0 {
  width: 0;
}

Upvotes: 3

Related Questions