I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe it involves managing states. However, I am struggling to make it work.
I attempted the following approach, but it is not functioning as expected:
<div className='vote_card_hover' style={{transform:this.state.toggle? 'translate(-50%, -50%) scale(1)':''}}>
I used states to switch styles: when the toggle state is true, I apply the transformation. Unfortunately, this method is not working as intended.
.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>