React and Bulma CSS - Not being able to animate modal

Question

I am trying to implement fade-in scale effect in a Bulma CSS modal component with react and scss. It opens (gets active) when I click on a button which turns a state variable this.state.open to true as shown in the code below.

      <div
          className={
            this.state.open
              ? (this.props.modalClass || 'login-modal') + ' modal is-mobile is-active'
              : ' modal is-mobile'
          }
          id={this.props.modalId || 'login-modal'}
        >
          <div className={`modal-background ${this.state.open && 'modal-bg-active' }`}></div>
          <div className={`modal-content ${this.state.open && 'modal-content-active'}`}>
            <div ref={node => (this.wrapperRef = node)} className='modal-content-inner columns is-multiline'>
              <div className='column left-content'></div>
              <div className='column right-content'>
                <div className='text-container'>
                  <div className='text-inner-container'>
                   .
                   .
                   .
                   .

I didn't add the entire markup here as in most websites I have seen the classes used for animating are modal,modal-background, and modal-content

The sass code I have written for the modal is:

.modal.login-modal {
  z-index: 1000;

  .modal-background {
    transition: all 3s;
    opacity: 0;
  }

  .modal-content {
    background: #fff;
    max-width: 840px;
    width: 100%;
    transform: scale(0.7);
    opacity: 0;
    transition: all 3s;
  }

  &.is-active {
    visibility: visible;
    .modal-background {
      opacity: 1;
      @include box_shadow_dark();
      background-color: rgba(0, 0, 0, 0.85);
     }

    .modal-content {
      transform: scale(1);
      opacity: 1;
    }
  }


// .modal-background.modal-bg-active {
//   visibility: visible;
//   opacity: 1;
//   @include box_shadow_dark();
//   background-color: rgba(0, 0, 0, 0.85);
// }

// .modal-content {
//   background: #fff;
//   max-width: 840px;
//   width: 100%;
//   transform: scale(0.7);
//   opacity: 0;
//   transition: all 0.3s;
// }

// .modal-content.modal-content-active {
//   transform: scale(1);
//   opacity: 1;
// }



//==================================================> EXTRA CODE FOR CONTENT INSIDE MODAL
.left-content {
  background-color: #fff;
  background-image: url('https:some_url');

  @include tablet_only {
    display: none;
    background-image: none;
  }
  @include mobile_only {
    display: none;
    background-image: none;
  }
}

.right-content {
  background: #fff;
  .text-container {
    text-align: center;
    box-sizing: border-box;
    @include mobile_only {
      padding: 0;
    }
  }
  .text-inner-container {
    padding: 40px;
    @include mobile_only {
      padding: 30px;
      height: auto;
    }
  }
}

// ==================================== Prompt
.prompt-text {
  margin: 15px auto 25px;
  font-size: 18px;
  text-align: left;
}

// ===================================== Email OTP Fields
.user-input-field {
  input {
    font-size: 14px;
    padding: 12px 15px;
    width: 100%;
    height: auto;
    border-width: 2px;
  }
  label {
    font-size: 13px;
    text-align: left;
    margin-bottom: 10px;
    font-weight: $fontWeightBold;
  }
  .error-message {
    font-size: 13px;
    color: red;
    text-align: left;
    margin: 8px 0px 5px;
    font-weight: $fontWeightBold;
  }
}

.otp-button {
  margin: 15px auto 20px;
  padding: 11px 15px;
}

// ====================================== Login Buttons
.login-button {
  border-radius: 4px;
  padding: 13px 15px;
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  height: auto;
  font-weight: $fontWeightExtraBold;
  @include box_shadow_dark();
}

.facebook-login-js {
  display: inline-block;
  color: white;
  margin: 20px auto 15px;
  background-color: $fbBlue;
  border: none;
  &:hover {
    background-color: $fbBlueDark;
  }
}

// google login
.google-login-js {
  display: inline-block;
  color: white;
  margin: 0px auto 15px;
  background-color: $gplusRed;
  border: none;
  &:hover {
    background-color: $gplusRedDark;
  }
}

// ========================================== Seperator
.seperator-text-container {
  .seperator-text {
    font-weight: $fontWeightBold;
    color: #555555;
  }
}

.terms-line {
  font-size: 10px;
}


//=========================================================> EXTRA CODE FOR CONTENT INSIDE MODAL

    }
}

What am I getting wrong here? How should I change the code for it to work? I will surely provide more details if required to understand it. Thank you!

Answer 1

I believe the issue is that bulma modal class has display: none property which can not be animated. Try overwriting it to display: block.

Or you could possibly use something like this https://github.com/postare/bulma-modal-fx