Add active class for onClick in reactjs

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

Win · Accepted Answer · 2017-08-23 05:50:43Z

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

edited Aug 23, 2017 at 5:50

answered Aug 23, 2017 at 5:00

Win

2,1332 gold badges14 silver badges14 bronze badges

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

Comments

felixmosh · Accepted Answer · 2017-08-23 04:54:17Z

-2

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>

edited Aug 23, 2017 at 4:54

answered Aug 23, 2017 at 4:35

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

1 Comment

CraZyDroiD Over a year ago

this works only for one div that uses this class.i dont know why.And also the transition is not happening the way i want

Collectives™ on Stack Overflow

Add active class for onClick in reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related