React Animations
0 likes266 views
This document discusses animations in React. It covers two main types of animations: components entering/leaving the DOM and components already in the DOM. React provides lifecycle hooks and libraries like ReactTransitionGroup and ReactCSSTransitionGroup to help implement animations. ReactCSSTransitionGroup provides a simple way to add CSS transitions when components enter or leave using class names. The document includes examples of how it works and transitions elements scaling in and out.
React Animations
- 2. Two Types Component In the DOM Component Entering/Leaving the DOM Add a class or whatever
- 3. Two Types Component In the DOM Component Entering/Leaving the DOM Add a class or whatever
- 5. DOM
- 6. Virtual DOM "PotatoHead": { "head": { "peg": null }, "body": { "topPeg": "eyes", "middlePeg": null, "bottomPeg": null }, "bottom": { "peg": "shoes" } }
- 8. Virtual DOM "PotatoHead": { "head": { "peg": null }, "body": { "topPeg": "eyes", "middlePeg": null, "bottomPeg": "mouth" }, "bottom": { "peg": "shoes" } }
- 9. DOM
- 10. Animations don’t really fit. . .
- 17. ReactTransitionGroups class Box extends React.Component { componentWillEnter (done) { const el = findDOMNode(this); TweenMax.fromTo(el, 0.3, {y: 100}, {y: 0, onComplete: done} ); } componentWillLeave (done) { const el = findDOMNode(this); TweenMax.fromTo(el, 0.3, {y: 0}, {y: -100, onComplete: done} ); } render () { return <div className="box"/>; } } Source: “Animations with ReactTransitionGroup” by Chang Wang on Medium
- 18. ReactCSSTransitionGroups A simple abstraction that handles many use cases. Implementation in code at react/src/addons/transitions
- 19. ReactCSSTransitionGroups const ShapeContainer = ({elements}) => ( <div id = "shapes"> <ReactCSSTransitionGroup transitionName = "shape" transitionEnterTimeout={2000} transitionLeaveTimeout={2000} > {elements} </ReactCSSTransitionGroup> </div> )
- 20. ReactCSSTransitionGroups .shape-enter { transform: scale(0); } .shape-enter.shape-enter-active { transform: scale(1); transition: all 2s ease-in; }
- 21. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> </span> </div> Created by ReactCSSTransitionGroup
- 22. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" class="shape-enter"> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Scale to 0
- 23. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" class="shape-enter shape-enter-active"> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Transition Triggered: Scaling to 1
- 24. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Transition Complete
- 25. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> </span> </div> Scale to 0
- 26. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> <svg data-reactid=".0.2" class="shape-enter"> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Scale to 0
- 27. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> <svg data-reactid=".0.2" class=“shape-enter shape-enter-active“> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Scaling to 1
- 28. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Transition Complete
- 29. Leaving is the same <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span> </div>
- 30. ReactCSSTransitionGroups .shape-leave { transform: scale(1); } .shape-leave.shape-leave-active { transform: scale(0); transition: all .5s ease-in; }
- 31. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> <svg data-reactid=".0.2" class="shape-leave"> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Scale to 1
- 32. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> <svg data-reactid=".0.2" class=“shape-leave shape-leave-active“> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Scaling to 0
- 33. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span> </div> Transition Complete
- 34. ReactCSSTransitionGroups <div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" … </svg> </span> </div> Element Disappears
- 36. Takeaways 1. Animations in React rely on new lifecycle hooks 2. ReactTransitions give more control and allow callbacks when animations end 3. ReactCSSTransitions allow a simple hook for CSS-based transitions