Animação slideUp () e slideDown () usando React.js
Eu criei um componente de reação que consiste em animação slideUp () e slideDown (). Eu implementei usando métodos deslizantes e slidown do jQuery.
Eu tenho que implementar esse recurso usando animação de reação.
eu leio sobreReactTransitionGroup eReactCSSTransitionGroup. O caminho da explicação me ensinou que podemos fazer essa funcionalidade quandoDomNode montado em um componente ou desmontar (corrija-me se estiver errado).
Minha pergunta é -> como fazer slideup () e slidedown () de maneira reagente e sem usar o jQuery.
Veja este jsFiddle parahttps://jsfiddle.net/guc3yrm1/
P.S -> Por favor, explique-me porque essa parte da animação de reação parece um pouco difícil quando comparada ao jQuery (eu sou um cara do jQuery)
var Hello = React.createClass({
getInitialState: function() {
return {
slide: false,
}
},
slide: function() {
if (this.state.slide) {
$(this.refs.slide).slideDown();
this.setState({
slide: false
});
} else {
$(this.refs.slide).slideUp();
this.setState({
slide: true
});
}
},
render: function() {
return (
<div>
<input type = "button" value = "clickme" onClick = {this.slide}/>
<br />
<br />
<div className = "slide" ref="slide" >< /div>
</div>
);
}
});
ReactDOM.render( < Hello name = "World" / > ,
document.getElementById('container')
);