slideUp() e slideDown() utilizzando React.js

Question

Ho creato un componente di reazione costituito da animazione slideUp() e slideDown(). Ho implementato usando i metodi slideup e slideown di jQuery.

Devo implementare questa funzione utilizzando l'animazione di reazione.

ho letto su ReactTransitionGroup e ReactCSSTransitionGroup. Il modo di spiegare mi ha insegnato che possiamo fare questa funzionalità quando DomNode montato su un componente o smonta (correggimi se ho torto).

La mia domanda è -> come fare slideup() e slidedown() in modo reattivo e senza usare jQuery.

Vedere questo jsFiddle per https://jsfiddle.net/guc3yrm1/

PS -> Si prega di spiegare a me il motivo per cui questo reagisce parte l'animazione sembra po 'una difficoltà quando si confronta con jQuery (io sono un ragazzo 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') 
); 

Answer 1

È possibile implementare la animazioni nelle API di entrambe le animazioni. Qui è la differenza principale:

ReactTransitionGroup è l'API su cui è ReactCSSTransitionGroup costruito. La differenza principale tra le due è che le animazioni di ReactTransitionGroup sono scritte in Javascript anziché in CSS e viene fornita una richiamata per essere richiamate quando le animazioni sono complete invece di fare affidamento su eventi di transizione CSS.

La mia conclusione è usare le animazioni CSS per le attività semplici, mentre Javascript per quelle complesse.

Ad esempio se il componente ha un'altezza statica, è possibile implementarlo tramite CSS, come illustrato nell'esempio seguente. Ma se la larghezza/altezza sono dinamiche, allora puoi farlo con Javascript. Nell'esempio Javascript sto usando la libreria Velocity per le animazioni. It's performance better than jQuery's animations. Naturalmente è possibile implementare le animazioni da soli, ma perché reinventare la ruota?

Ho implementato slideUp/slideDown con entrambe le API. Dai un'occhiata qui sotto.

(CSS) Attuazione tramite ReactCSSTransitionGroup:

const CSSTransitionGroup = React.addons.CSSTransitionGroup; 
 
const TransitionGroup = React.addons.TransitionGroup; 
 

 
class Example extends React.Component{ 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { visible: false }; 
 
     this.handleClick = this.handleClick.bind(this) 
 
    } 
 

 
    handleClick() { 
 
    \t this.setState({ visible: ! this.state.visible }); 
 
    } 
 

 
    render() { 
 
     return <div> 
 
      <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button> 
 
      <CSSTransitionGroup transitionName="example"> 
 
      \t { this.state.visible ? <div className='panel' /> : null } 
 
      </CSSTransitionGroup> 
 
     </div> 
 
    } 
 
} 
 

 
React.render(<Example />, document.getElementById('container'));

.panel { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: green; 
 
    margin-top: 10px; 
 
} 
 

 
.example-enter { 
 
    height: 0px; 
 
} 
 

 
.example-enter.example-enter-active { 
 
    height: 100px; 
 
    -webkit-transition: height .3s ease; 
 
} 
 

 
.example-leave.example-leave-active { 
 
    height: 0px; 
 
    -webkit-transition: height .3s ease; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

JSFiddle - React Slide up and Slide down animation - CSS Transtion Group.

---

(Javascript) Attuazione tramite ReactTransitionGroup:

const TransitionGroup = React.addons.TransitionGroup; 
 

 
class Example extends React.Component{ 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { visible: false }; 
 
     this.handleClick = this.handleClick.bind(this) 
 
    } 
 

 
    handleClick() { 
 
     this.setState({ visible: ! this.state.visible }); 
 
    } 
 

 
    render() { 
 
     return <div> 
 
      <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button> 
 
       <TransitionGroup> 
 
        { this.state.visible ? <Accordion /> : null } 
 
       </TransitionGroup> 
 
      </div> 
 
     } 
 
    } 
 

 
    class Accordion extends React.Component { 
 
     componentWillEnter (callback) { 
 
      const element = this.container.getDOMNode(); 
 
      Velocity(element, 'slideDown', { duration: 300 }).then(callback); 
 
     } 
 

 
     componentWillLeave (callback) { 
 
      const element = this.container.getDOMNode(); 
 
      Velocity(element, 'slideUp', { duration: 300 }).then(callback); 
 
     } 
 

 
     setContainer(c) { 
 
      this.container = c; 
 
     } 
 

 
     render() { 
 
      return <div className="panel" ref={this.setContainer.bind(this)}> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      </div> 
 
     } 
 
    } 
 

 
React.render(<Example />, document.getElementById('container'));

.panel { 
 
    background: green; 
 
    margin-top: 10px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

JSFiddle - React Slide up and Slide down animation - Javascript Transition group.

---

Crediti:

• Animations with ReactTransitionGroup
• CSS vs. JS Animation: Which is Faster?

Answer 2

Come richiesto dal Jordan Enev i biforcuta sua JSFiddle.

Ecco una soluzione che non richiede React Css Transition Group. Personalmente sono un fan dei commutatori di classe. Questo è stato possibile creare l'animazione css come preferisci.

https://jsfiddle.net/fyuh32je/3/

(tutto il codice nella violino)

class Example extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { visible: 'panel' }; 
     this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick() { 
     this.setState({ visible: this.state.visible == 'panel'? 'panel visible' : 'panel' }); 
    } 

    render() { 
     return <div> 
      <button onClick={this.handleClick}>{!this.state.visible == 'panel' ? 'Slide up' : 'Slide down'}</button> 
       <div className={this.state.visible}> 
       <p>This is some dynamic content!</p> 
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
       </div> 
     </div> 
    } 
} 

React.render(<Example />, document.getElementById('container')); 

So che è sporco di utilizzare la variabile di stato visibile in quel modo, ma io sono al lavoro e non ho avuto troppo tempo per cambia troppo Si noti che stiamo usando la classe visibile per attivare il contenitore div con un'animazione.

In generale. I contenitori di altezza dinamica possono essere animati con l'utilizzo hacky dell'attributo max-height in css.

Answer 3

Se (come me) è venuto qui in cerca di un'alternativa al reagirà jQuery di slideDown/slideUp, quindi react-slidedown sembra come un facile da usare reagire componente. La pagina Github ha una demo e codice di esempio.