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

Posted 2023-03-05

【中文标题】CSS 动画，不适用于禁用的引导按钮

【英文标题】：CSS animations, not working on disabeled bootstrap button

【发布时间】：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;
  

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

【参考方案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>