Atualmente tenho pesquisado como fazer animações com React.js, mas pelo que entendi, o pessoal utiliza o css transitions group, não tem como fazer animações de maneira mais simples utilizando apenas o javascript, como no Jquery? No Jquery eu faço dessa forma:
$('.button-teste').click(function () {
$('.teste').fadeToggle(1000);
});
No React não tem funções como o fadeIn(), fadeOut(), show(), hide(), toggle() e fadeToggle() e como manipular o tempo da animação como no Jquery utilizando funções como essas? Minha ideia é mostrar e esconder o login, só que de forma lenta utilizando um efeito igual o fadeToggle(1000). Meu código 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;