CODEWITHSUNDEEP
cssreactjs
Loren
Loren

Reputation: 59

The transition set in React with classnames does'n work

In a MobileMenu component, I add class 'open' when state is changed. This adds class 'open' to the div with class 'mobileMenu-subNavSlider' and makes it appear. It should slowly move from right to left during the transition but the transition doesn't work. The element appears but without transition. How to make it work?

const MobileMenu = () => {
   const [visible, setVisible] = useState(false)

   return (
     <div className="mobileMenu">
         <div className="mobileMenu-body"
             onClick={() => setVisible(true)}>
                     Hello
         </div>
         <div
            className={classNames('mobileMenu-subNavSlider', 
           {open: visible})}
         >
         </div>
    </div>
  )
}
        *** CSS ***

.mobileMenu {
   min-height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   background: #410078;
   color: #fff;
 }

.mobileMenu-subNavSlider {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 40px rgb(0 0 0 / 60%);
  background: #6504b5;
  display: none;
  transform: translateX(102%);
}

.mobileMenu-subNavSlider.open {
  display: block;
  transform: translateX(0%);
  transition: transform 5s;
}   

.mobileMenu-body {
  padding: 80px 130px 30px;
  background: #6504b5;
}

Upvotes: 2

Views: 682

Answers (1)

Carlton Lindsay
Carlton Lindsay

Reputation: 656

The transition property needs to be set on the base element.

Try this:

.mobileMenu-subNavSlider {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 40px rgb(0 0 0 / 60%);
  background: #6504b5;
  display: none;
  transform: translateX(102%);
  transition: transform 5s;
}

.mobileMenu-subNavSlider.open {
  display: block;
  transform: translateX(0%);
  transition: transform 5s;
}

See: Trying to do a CSS Transition on a class change

Upvotes: 1

Related Questions