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的那一刻起继续工作。所以如果你想在第一次之后停止它。您可以更改animation: mymove 1s 1;之类的css属性。

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

＆＃13;

$('a').on('click', function(){
  $('.vote_card_hover').addClass('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%;
    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);}
}

＆＃13;

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

＆＃13;

将css设置为onClick方法

1 个答案: