Created
July 18, 2015 21:26
-
-
Save bsansouci/c8c760339f5134c50ac5 to your computer and use it in GitHub Desktop.
Working with CSS Transitions in react-motion
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*eslint-disable */ | |
| import React, {cloneElement} from 'react'; | |
| import {TransitionSpring} from '../../src/Spring'; | |
| var Counter = React.createClass({ | |
| render: function() { | |
| return <div className={this.props.className} style={{ | |
| width: 100, height: 100, | |
| backgroundColor: 'hsl(' + Math.ceil(Math.random() * 360) + ', 100%, 50%)', | |
| textAlign: 'center', | |
| lineHeight: '100px', | |
| position: 'absolute' | |
| }}> | |
| {this.props.index} | |
| </div>; | |
| } | |
| }); | |
| var shouldLeave = {}; | |
| var shouldNotLeave = {}; | |
| var App = React.createClass({ | |
| direction: '', | |
| getInitialState: function() { | |
| return { index: 0 }; | |
| }, | |
| componentWillUpdate : function(newProps, newState) { | |
| this.direction = this.state.index > newState.index ? 'backward' : 'forward'; | |
| }, | |
| backward: function() { | |
| this.setState({index: this.state.index - 1}); | |
| }, | |
| forward: function() { | |
| this.setState({index: this.state.index + 1}); | |
| }, | |
| endValue: function() { | |
| var key = this.state.index.toString(); | |
| console.log('endValue', key); | |
| return [ | |
| <Counter | |
| className={"middle"} | |
| key={key} | |
| index={key} /> | |
| ]; | |
| }, | |
| willEnter: function(key, value) { | |
| console.log('willEnter', key); | |
| return React.cloneElement(value, {className: this.direction + "-enter"}); | |
| }, | |
| willLeave: function(key, endValue, currVals, currV) { | |
| console.log('willLeave', key); | |
| return <Counter | |
| className={this.direction + "-leave"} | |
| key={key} | |
| index={key}/>; | |
| }, | |
| render: function() { | |
| return <div> | |
| <button onClick={this.backward}>-</button> | |
| <button onClick={this.forward}>+</button> | |
| <TransitionSpring | |
| endValue={this.endValue} | |
| willEnter={this.willEnter} | |
| willLeave={this.willLeave}> | |
| {currValue => { | |
| return ( | |
| <div style={{ | |
| width: 100, height: 100, | |
| border: '1px solid', | |
| overflow: 'hidden', | |
| position: 'relative' | |
| }}> | |
| {currValue} | |
| </div> | |
| ); | |
| }} | |
| </TransitionSpring> | |
| </div>; | |
| } | |
| }); | |
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>How Many Demos Do You Need</title> | |
| <style> | |
| .middle { | |
| transform: translateX(0%); | |
| transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |
| } | |
| .forward-enter { | |
| transform: translateX(100%); | |
| transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |
| } | |
| .forward-leave { | |
| transform: translateX(-100%); | |
| transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |
| } | |
| .backward-enter { | |
| transform: translateX(-100%); | |
| transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |
| } | |
| .backward-leave { | |
| transform: translateX(100%); | |
| transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="content"></div> | |
| <script src="./all.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import Demo from './Demo'; | |
| React.render(<Demo />, document.querySelector('#content')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment