why css transition is not working with 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;


}

i tried everything also search a lot but dont know where the problem is in code mostly i used this transition with hover and it works for me iam using position relative and absolute thanks for help

Tad Wohlrapp · Accepted Answer · 2020-05-05 07:36:15Z

1

Probably something like this:

.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;
}

Note that commenting out in CSS only works with /* ... */. CSS doesn't understand //, only SCSS does.

Also you cannot transition between display: none and display: block. Use opacity instead.

Depending on where it sits you might want to toggle pointer-events of your warning-message, too.

edited May 5, 2020 at 7:36

answered May 5, 2020 at 7:28

Tad Wohlrapp

1,9271 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

why css transition is not working with js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related