Set css active to onClick method

Question

I want to start a transition when I click on a div. Currently my transition happens only when using with css active. I want this transition to happen when I click on this div. How can i do that? I'm using reactjs and i think it should be done using states. But I cannot figure out how to do this.

I have done something like this but it is not working

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

I have switched style using states. when toggle state becomes true i'm doing the transformation. But it is not working

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

Possible duplicate of ReactJs adding active class to button

Medet Tleukabiluly
– Medet Tleukabiluly

2017-08-22 11:18:35 +00:00
Commented Aug 22, 2017 at 11:18 — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Aug 22, 2017 at 11:18
@MedetTleukabiluly It's different to what i want to do

CraZyDroiD
– CraZyDroiD

2017-08-22 12:11:35 +00:00
Commented Aug 22, 2017 at 12:11 — CraZyDroiD
– CraZyDroiD, Commented Aug 22, 2017 at 12:11

Abin Thaha Azees · Accepted Answer · 2017-08-22 11:25:45Z

0

In this example, I made it like, the animation will keep working from the moment you click on test. So if you want to stop it after the first time. You can change the css property like animation: mymove 1s 1;.

Let me know if it wasn't your requirement.

$('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>

answered Aug 22, 2017 at 11:25

Abin Thaha Azees

4,7733 gold badges16 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abin Thaha Azees Over a year ago

You can toggle the state onClick of the test and apply the same class using the help of that state.

Collectives™ on Stack Overflow

Set css active to onClick method

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related