CODEWITHSUNDEEP
javascripthtmlcss
arslan
arslan

Reputation: 1144

why css transition is not working with js

<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

Upvotes: 0

Views: 54

Answers (1)

Tad Wohlrapp
Tad Wohlrapp

Reputation: 1897

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.

Upvotes: 1

Related Questions