React 和 Bulma CSS - 无法制作模态动画

Question

我正在尝试使用 React 和 scss 在 Bulma CSS 模态组件中实现淡入比例效果。当我单击将状态变量 this.state.open 变为 true 的按钮时，它会打开（激活），如下面的代码所示。

      <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'>
                   .
                   .
                   .
                   .

我没有在此处添加整个标记，因为在我看到的大多数网站中，用于动画的类是模态、模态背景和模态内容

我为模态写的sass代码是：

.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

    }
}

我在这里弄错了什么？我应该如何更改代码才能使其正常工作？如果需要理解它，我一定会提供更多细节。谢谢！

Answer 1

我认为问题在于 bulma modal class 有 display: none 属性无法设置动画。尝试将其覆盖为 display: block.

或者你可以使用类似这样的东西https://github.com/postare/bulma-modal-fx

React 和 Bulma CSS - 无法制作模态动画

React and Bulma CSS - Not being able to animate modal

css

reactjs

sass

css-transitions

bulma