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 the way i intended. I have done something similar to this when i had only :active class. But in this instance i have :before and :active:before.

I want to know how to change css via states which has :before property.

i found this link but was not helpful

ReactJs adding active class to button

This is my approach

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

My code

<div className='vote_card_hover'>

     <a>Test</a>

</div>

my CSS

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

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 the way i intended. I have done something similar to this when i had only :active class. But in this instance i have :before and :active:before.

I want to know how to change css via states which has :before property.

i found this link but was not helpful

ReactJs adding active class to button

This is my approach

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

My code

<div className='vote_card_hover'>

     <a>Test</a>

</div>

my CSS

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

• javascript
• css
• reactjs

2 Answers 2

Do it like this:

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

Your code was not in React, so I've updated it.

Basically, in React you can do the same thing, add and remove a class by state change.

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

function toggleClass() {
  document.querySelector('.vote_card_hover').classList.toggle('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%;
  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
}

<div class='vote_card_hover'>

  <a>Test</a>
</div>

<button onclick="toggleClass()">toggleClass</button>