html - CSS 动画，不适用于禁用的 Bootstrap 按钮

Question

我有一个 BootStrap 按钮，我正在 React 中渲染它，它有一个属性，其中有一个条件确定它是否被禁用:

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

它在没有 CSS 类的情况下工作正常，但只要用户将鼠标悬停在它上面，即使它被禁用，它也会产生动画:

这是我的按钮 CSS 代码

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

即使被禁用，这些动画仍然有效吗？是否有解决方法，以便在禁用时不会显示动画？

Answer 1

以下示例演示了禁用按钮时动画不活动。

诀窍是从本质上将 bsClass="fill" 更改为 bsClass={this.state.isDisabled ？ '' : 'fill'} 禁用时删除 css 类动画。

// 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>