React and Bulma CSS - Not being able to animate modal - css

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