Animations using React.js

Asked

Viewed 936 times

0

Currently I have researched how to make animations with React.js, but from what I understand, people use css Transitions group, there is no way to make animations simpler using only javascript, as in Jquery? In Jquery I do it this way:

$('.button-teste').click(function () {
        $('.teste').fadeToggle(1000);
    });

Does React not have functions like fadein(), fadeOut(), show(), Hide(), toggle() and fadeToggle() and how to manipulate the animation time like in Jquery using functions like these? My idea is to show and hide the login, but slowly using an effect equal to fadeToggle(1000). My code React:

import React, { Component } from 'react';
import Body from './components/Body';
import Login from './components/Login';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
        toggleLogin: false,
    };

}

toggleLogin = () => {
  this.setState({toggleLogin: !this.state.toggleLogin});  
};

  render() {
    return (
      <div>
          <Body handleClick={this.toggleLogin} />
          {this.state.toggleLogin &&(<Login handleClick={this.toggleLogin} />)}
      </div>
    );
  }
};

export default App;
react

  • Why do you think people go for css? You want the simplest, simplest is in CSS, no need browser processing to run a simple animation

  • I understand your point, but I say simple about less code. I know browser processing is important, but my goal in this case is to do it with less code. It’s not about laziness, it’s about productivity anyway.

1 answer

0

Louie, it is totally possible to use Jquery with React. just install the dependency with npm or Yarn and import it. But I advise you to use both CSS and pure Javascript, since React is a lib that works on JS.

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.