将 css active 设置为 onClick 方法

Question

我想在单击 div 时开始转换。目前，我的转换仅在与 css active 一起使用时发生。我希望在单击此 div 时发生这种转换。我怎样才能做到这一点？我正在使用 reactjs，我认为应该使用状态来完成。但我不知道该怎么做。

我做过类似的事情，但它不起作用

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

我已经使用状态切换了样式。当toggle 状态变为真时，我正在进行转换。但它不起作用

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

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

Answer 1

在这个例子中，我把动画从你点击test的那一刻起就一直工作。因此，如果您想在第一次之后停止它。您可以更改 css 属性，例如 animation: mymove 1s 1;。

如果不是您的要求，请告诉我。

$('a').on('click', function(){
  $('.vote_card_hover').addClass('active');
})

.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%;
    width: 110%;
    height: 110%;
    background: rgba(57, 161, 255, 0.5);
    transition: transform 0.5s ease;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.vote_card_hover.active:before{
    animation: mymove 1s infinite;
}
@keyframes mymove {
    0%   {transform: translate(-50%, -50%) scale(0);}
    50%  {transform: translate(-50%, -50%) scale(1)}
    100% {transform: translate(-50%, -50%) scale(0);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vote_card_hover'>
  <a>test</a>
 </div>