CSS animations, not working on disabeled bootstrap button

user_10061438 0
Viewed 503

I have a BootStrap button, that I'm rendering in React, and it has a property, og a condition within that determines if it's disabled:

  <Button bsClass="fill"
        disabled={!props.purchaseble}
        onClick={console.log("clicked!")}
        >Order now</Button>

it works fine without the CSS class, but it animates, whenever the user hovers over it, even when it's disabled:

here is my CSS code for the button

  .fill:hover {
    color: whitesmoke;
    cursor: pointer;

  }

  .fill:before {
    cursor: pointer;

    content: "";
    position: absolute;
    background: #5a320b;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
  }

  .fill:hover:before {
    cursor: pointer;

    top: 0;
  }

Do these animations still work even if it's disabled and is there a workaround, so the animations don't appear when disabled?

twitter-bootstrap reactjs css html
2 Answers

Here is an example that demonstrates the animation is not active when the button is disabled.

The trick is to essentially change bsClass="fill" to something like bsClass={this.state.isDisabled ? '' : 'fill'} which removes the css class animation when disabled.

// Example class component
class Container extends React.Component {
  constructor(props) {
    super(props);
    this.toggleDisabled = this.toggleDisabled.bind(this);
    this.state = { isDisabled: false };
  }
  
  toggleDisabled() {
    this.setState({ isDisabled: !this.state.isDisabled });
  }

  render() {
    return (
        <div>
          <button className={this.state.isDisabled ? '' : 'fill'}
            disabled={this.state.isDisabled}
          >Order now</button>
          <button onClick={() => { this.toggleDisabled(); }}>Click to toggle disabled</button>
        </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Container/>,
  document.getElementById("react")
);
.fill:hover {
    color: whitesmoke;
    cursor: pointer;

  }

  .fill:before {
    cursor: pointer;

    content: "";
    position: absolute;
    background: #5a320b;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
  }

  .fill:hover:before {
    cursor: pointer;

    top: 0;
  }
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

user_13376040

The transition should work totally fine even when the button is disabled. This example may help, let me know if you have any questions about what I did.

Edit: I misunderstood the initial question, but modified the code to fix the misunderstanding. Using :not([disabled]) should stop the animation from running when the element is set to disabled.

.fill:not([disabled]):hover {
  color: whitesmoke;
  cursor: pointer;
}

.fill::before {
  cursor: pointer;
  content: "";
  position: absolute;
  background: #5a320b;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  -webkit-transition: top 0.09s ease-in;
}

.fill:not([disabled]):hover::before {
  cursor: pointer;
  top: 0;
}

  /* Set the button to be relative so the absolute pseudo element stays inside */
.fill {
  position: relative;
}

/* Place the text inside of a span so that it can sit in front of the pseudo element */
.fill > span {
  position: relative;
}
<button class="fill" disabled>
  <span>Look at me, I'm a disabled example!</span>
</button>

<br/>

<button class="fill">
  <span>Look at me, I'm a not disabled example!</span>
</button>

user_50264380
Related