Question

我想点击div时开始转换。目前我的转换仅在使用css active时发生。我希望当我点击这个div时会发生这种转变。我怎样才能做到这一点？我使用reactjs，我认为应该使用状态来完成。但我无法弄清楚如何做到这一点。

我做过类似的事情，但它没有像我预期的那样工作。当我只有:active课时，我做了类似的事情。但在这种情况下，我有:before和:active:before。

我想知道如何通过具有:before属性的状态更改css。

我发现此链接但没有帮助

这是我的方法

<div className='vote_card_hover' style={{transform:this.state.toggle? 'translate(-50%, -50%) scale(1)':''}}>

我的代码

<div className='vote_card_hover'>

     <a>Test</a>

</div>

我的CSS

＆＃13;

.vote_card_hover {
  position: absolute;
  width: 100px;
  height:100px;
  transition: .3s ease;
  background-color: 'red'
}

.vote_card_hover:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 110%;
  height: 110%;
  background: rgba(57, 161, 255, 0.5);
  transition: transform 0.5s ease;
  border-radius: 50%;
}

.vote_card_hover:active:before {
  transform: translate(-50%, -50%) scale(1);
}

＆＃13;

   <div class='vote_card_hover'>

                 <a>Test</a>

   </div>

＆＃13;

Answer 1

这样做：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animate: false;
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    // modify the state, this will automatically recall render() below.
    this.setState((prevState) => {
      return { animate: !prevState.animate }
    });
  }

  render() {
    let animationClasses = (this.state.animate ? ' active': '');

    return (
      <div>
        <div className={`vote_card_hover${animationClasses}`}>
          <a>Test</a>
        </div>

        <div>
          <Button title="Toggle Animation" onClick={this.handleClick} />
        </div>
      </div>
    )
  }
}

Answer 2

你的代码不在React中，所以我已经更新了它。

基本上，在React中你可以做同样的事情，通过状态改变来添加和删除一个类。

<MyComp className={this.state.isActive? 'active':''}
<button onClick={() => this.setState({isActive: !this.state.isActive})}>ToggleClass</button>
</MyComp>

＆＃13;

function toggleClass() {
  document.querySelector('.vote_card_hover').classList.toggle('active');
}

＆＃13;

.vote_card_hover {
  position: absolute;
  width: 100px;
  height: 100px;
  transition: .3s ease;
  background-color: 'red'
}

.vote_card_hover:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 110%;
  height: 110%;
  background: rgba(57, 161, 255, 0.5);
  transition: transform 0.5s ease;
  border-radius: 50%;
}

.vote_card_hover.active:before {
  transform: translate(-50%, -50%) scale(1);
}

button {
  position: absolute;
  top: 200px
}

＆＃13;

<div class='vote_card_hover'>

  <a>Test</a>
</div>

<button onclick="toggleClass()">toggleClass</button>

＆＃13;

为onClick in reactjs添加活动类

2 个答案: