• Spring
  • SQL Tutorial
  • JavaScript
  • Servlet
  • Java IO
  • RubyonRails
  • JSP
  • Core Java
  • PHP

  • <

    Reactjs Animations

    React Transition Group is an add-on component for managing component states and useful for defining entering and exiting transitions.It is not able to animate styles by itself. Instead, it exposes transition states, manages classes and group elements, and manipulates the DOM in useful ways.

    Install React CSS Transitions Group



    C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group
    


    Example


    app.js
    import React, { Component } from 'react';  
    import { CSSTransitionGroup } from 'react-transition-group';  
      
    class App extends React.Component {  
        constructor(props) {  
        super(props);  
        this.state = {items: ['Blockchain', 'ReactJS', 'TypeScript', 'protutorialplus']};  
        this.handleAdd = this.handleAdd.bind(this);  
      }  
      
      handleAdd() {  
        const newItems = this.state.items.concat([  
          prompt('Enter Item Name')  
        ]);  
        this.setState({items: newItems});  
      }  
      
      handleRemove(i) {  
        let newItems = this.state.items.slice();  
        newItems.splice(i, 1);  
        this.setState({items: newItems});  
      }  
      
      render() {  
        const items = this.state.items.map((item, i) => (  
          <div key={item} onClick={() => this.handleRemove(i)}>  
            {item}  
          </div>  
        ));  
      
        return (  
          <div>  
        <h1>Animation Example</h1>  
                <button onClick={this.handleAdd}>Insert Item</button>  
                <CSSTransitionGroup  
                   transitionName="example"  
               transitionEnterTimeout={800}  
                   transitionLeaveTimeout={600}>  
                   {items}  
                </CSSTransitionGroup>  
          </div>  
        );  
      }  
    }  
    export default App;  
    


    main.js
    import React from 'react';  
    import ReactDOM from 'react-dom';  
    import App from './App.js';  
      
    ReactDOM.render(<App />, document.getElementById('app'));  
    


    style.css
    .example-enter {  
      opacity: 0.01;  
    }  
      
    .example-enter.example-enter-active {  
      opacity: 1;  
      transition: opacity 500ms ease-in;  
    }  
      
    .example-leave {  
      opacity: 1;  
    }  
      
    .example-leave.example-leave-active {  
      opacity: 0.01;  
      transition: opacity 300ms ease-in;  
    }  
    
















    © copyright 2017-2021 Completedone pvt ltd.