CSS 动画，不适用于禁用的引导按钮答案

【问题标题】：CSS animations, not working on disabeled bootstrap buttonCSS 动画，不适用于禁用的引导按钮
【发布时间】：2019-04-18 23:33:40
【问题描述】：

我有一个 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;
  }

即使这些动画被禁用，这些动画是否仍然有效，是否有解决方法，因此在禁用时动画不会出现？

【问题讨论】：

标签： html css reactjs twitter-bootstrap

【解决方案1】：

即使按钮为disabled，转换也应该完全正常。这个例子可能会有所帮助，如果您对我所做的事情有任何疑问，请告诉我。

编辑：我误解了最初的问题，但修改了代码以解决误解。当元素设置为disabled 时，使用:not([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>

【讨论】：

感谢您的评论，但我希望动画在禁用时不存在。
抱歉。我看看能不能修改一下。
我更新了我的答案，以展示如何在使用 CSS 禁用元素时停止动画。肖恩的回答似乎也是一个不错的策略。

【解决方案2】：

这里是一个例子，演示了当按钮被禁用时动画是不活动的。

诀窍是本质上将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>

【讨论】：