Download - React Animations
React Animations
Two Types
Component In the DOM
Component Entering/Leaving the DOM
Add a class or whatever
Two Types
Component In the DOM
Component Entering/Leaving the DOM
Add a class or whatever
Review: React Lifecycle
DOM
Virtual DOM"PotatoHead": { "head": { "peg": null }, "body": { "topPeg": "eyes", "middlePeg": null, "bottomPeg": null }, "bottom": { "peg": "shoes" }}
dispatch(existentialCrisis())
Virtual DOM"PotatoHead": { "head": { "peg": null }, "body": { "topPeg": "eyes", "middlePeg": null, "bottomPeg": "mouth" }, "bottom": { "peg": "shoes" }}
DOM
Animations don’t really fit. . .
Lifecycle
componentWillMount
Render!
componentDidMount
componentWillMount
componentDidMount
More Lifecycle Hooks
componentWillMount
Render!
componentDidMount
More Lifecycle HooksReactTransitionGroups
ReactTransitionGroups
Render!
componentWillMount
componentDidMount
More Lifecycle HooksReactTransitionGroups
ReactTransitionGroups
Render!
componentWillMount
componentDidMountcomponentWillEnter
ReactTransitionGroupsclass 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
ReactCSSTransitionGroups
A simple abstraction that handles many use cases.
Implementation in code at react/src/addons/transitions
ReactCSSTransitionGroupsconst ShapeContainer = ({elements}) => ( <div id = "shapes"> <ReactCSSTransitionGroup transitionName = "shape" transitionEnterTimeout={2000} transitionLeaveTimeout={2000} > {elements} </ReactCSSTransitionGroup> </div>)
ReactCSSTransitionGroups.shape-enter { transform: scale(0);}
.shape-enter.shape-enter-active { transform: scale(1); transition: all 2s ease-in;}
ReactCSSTransitionGroups
<div id="shapes"> <span data-reactid="0.1">
</span></div>
Created by ReactCSSTransitionGroup
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
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
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
ReactCSSTransitionGroups
<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"
… </svg>
</span></div>
Scale to 0
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
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
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
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>
ReactCSSTransitionGroups.shape-leave { transform: scale(1);}
.shape-leave.shape-leave-active { transform: scale(0); transition: all .5s ease-in;}
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
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
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
ReactCSSTransitionGroups
<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"
… </svg>
</span></div>
Element Disappears
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