animieren Komponente in DACT in ReactJS

Question

ist neu in React, macht es mir schwer zu verstehen, wie Elemente in React zu animieren. Gibt es einen einfachen Weg, es ohne react-transition-group zu tun? Lassen Sie uns sagen, dass ich diesen Code haben:

class CategoriesList extends Component{ 
    renderList(){ 
    return this.props.categories.map((category) => { 
     return(
     <div 
      key={category.title} 
      className="button"> 
      {category.title} 
     </div> 
     ) 
    }) 
    }    
    render(){ 
    return (
     <div className= 'container'> 
     {this.renderList()} 
     </div> 
    ) 
    }} 

Wo renderList() ist eine Methode, die auf Basis von Requisiten eine Liste von einigen divs macht. Wie könnte ich das Container-Div animieren, um es einzublenden, wenn die CategoriesList-Komponente gerendert wird? diese

Answer 1

Check out

class Example extends React.Component { 
 
    componentDidMount() { 
 
    
 
    dynamics.animate(this.refs.a, { 
 
     translateX: 150, 
 
     opacity: 1 
 
    }, { 
 
     type: dynamics.spring, 
 
     frequency: 200, 
 
     friction: 200, 
 
     duration: 1500 
 
    }) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div ref="a" style={{ 
 
     padding: 10, 
 
     background: 'tomato', 
 
     color: 'white', 
 
     width: 200, 
 
     fontFamily: 'Helvetica' 
 
     }}> 
 
     Animating Div 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 

 
ReactDOM.render(<Example />, document.querySelector('#root'))

<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/dynamics.js/1.1.5/dynamics.min.js"></script> 
 

 
<div id="root"></div>

ich verwendet habe, dynamics.js hier zu animieren.

Answer 2

Sie können dies einfach mit dem React-Lebenszyklus und grundlegenden CSS erreichen.

CSS:

.container { 
    opacity: 0; 
    transition: 200ms opacity ease-in-out; 
} 

Reagieren:

class CategoriesList extends Component{ 
    ... 
    componentDidMount() { 
    this.refs.container.style.opacity = 1; 
    } 
    ... 
    render(){ 
    return (
     <div className= 'container' ref="container"> 
     {this.renderList()} 
     </div> 
    ) 
    }} 

Die Reaktion Lebenszyklus ist, wo die Magie passiert. Check out the docs um mehr zu erfahren. Beachten Sie auch die Verwendung des ref-Attributs für den Zugriff auf den Container div-Knoten. Sie können auch viel damit machen, aber stellen Sie sicher, dass Sie dies nur versuchen, nachdem Ihre Komponente gerendert wurde.