1

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;
2
  • Porque acha que o pessoal opta por css? Você quer o mais simples, o mais simples é em CSS, não necessita processamento do navegador para executar uma simples animação Commented 13/04/2019 às 2:57
  • Entendo seu ponto de vista, mas digo simples em relação a menos código. Sei que o processamento do navegador é importante, mas o meu objetivo nesse caso é fazer com menos código. Não é questão de preguiça, é questão de produtividade mesmo.
    – Luiz
    Commented 13/04/2019 às 3:06

1 Resposta 1

1

Luizinho, é totalmente possível usar o JQuery com o React. é só fazer instalar a dependência com o npm ou yarn e fazer o import dele. Porém te aconselho a usar mesmo o CSS e o JavaScript puro, uma vez que o React é uma lib que trabalha sobre o JS.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .