javascript - 为什么 css 过渡不适用于 js

Question

<button  className={this.state.isSaveDraft===true? 
                     "cts_not_allowed stepper_btn_back" : "stepper_btn_back"} onClick={
                        this.state.isSaveDraft===false && this.approval_submitHandler}  >
                        Update An
                        <p className='warning_message' >You have changed Metadata, please re calculate pre-opso</p>
                     </button>

.cts_not_allowed{
// pointer-events: none;
cursor: not-allowed !important;
position: relative;
transition: width 2s;

}
.warning_message{
    display: none;
    transition: 0.9s ease-in-out;
}
.cts_not_allowed:hover .warning_message{
    display: block;
    position: absolute;
    bottom: 3vw;
    right: 1vw;
    // background-color: #ffffff;
    border: 1px solid #ffffff;
    width: 30vw;
    color: red;


}

我尝试了一切，也搜索了很多，但不知道问题出在代码中，主要是我使用悬停转换，它对我有用，我使用相对位置和绝对位置，感谢帮助

Answer 1

大概是这样的:

.cts_not_allowed {
  /* pointer-events: none; */
  cursor: not-allowed !important;
  position: relative;
  transition: width 2s; /* is this used anywhere? */
}

.warning_message {
  position: absolute;
  bottom: 3vw;
  right: 1vw;
  /* background-color: #ffffff; */
  border: 1px solid #ffffff;
  width: 30vw;
  color: red;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-in-out;
}

.cts_not_allowed:hover .warning_message {
  opacity: 1;
  pointer-events: auto;
}

请注意，CSS 中的注释仅适用于 /* ... */。 CSS 无法理解 //，只有 SCSS 可以。

此外，您无法在 display: none 和 display: block 之间转换。请改用不透明度。

根据它所在的位置，您可能还想切换警告消息的指针事件。