CODEWITHSUNDEEP
cssreactjs
Ardneh
Ardneh

Reputation: 181

Smooth transition when modal gets visible in React

I made modal in React and it's working fine, but I really want to add one small feature. When I'm clicking on button, class of modal is changing and modal is becoming visible, but this happens immediately and I want to add some transition.

My code: In parent method toggling class and passing props:

toggleModal() {
  this.setState({ visibleModal: !this.state.visibleModal });
}

<RegisterModal
  visible={this.state.visibleModal}
  toggleModal={this.toggleModal}
/>

Children component:

<div className={`modal ${props.visible ? 'modal--visible' : 'modal--invisible'}`}>

My CSS: 

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.modal--invisible {
  display: none;
}

.modal--visible {
  display: flex;
}

Can someone help me?

Upvotes: 0

Views: 3019

Answers (1)

Different55
Different55

Reputation: 597

Possibly related

The display property can't change smoothly, it only has fixed values. It jumps instantly from one to the next. You need to use transition and something like opacity to get a nice fade in.

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  transition: opacity .5s; /* Opacity will fade smoothly */
}

.modal--invisible {
  opacity: 0;
  pointer-events: none; /* Makes the modal unclickable */
}

.modal--visible {
   opacity: 1; /* Modal is visible */
   pointer-events: initial; /* Modal is clickable */
}

Upvotes: 3

Related Questions