-1&&t%1==0&&c>=t}function e(t){var e=n(t)?t.length:void 0;return r(e)&&i.call(t)==o||!1}var o="[object Arguments]",u=Object.prototype,i=u.toString,c=Math.pow(2,53)-1;t.exports=e},function(t){function n(t){return"string"==typeof t?t:null==t?"":t+""}function r(t){return t&&"object"==typeof t||!1}function e(t){return null==t?!1:s.call(t)==u?l.test(p.call(t)):r(t)&&i.test(t)||!1}function o(t){return t=n(t),t&&f.test(t)?t.replace(c,"\\$&"):t}var u="[object Function]",i=/^\[object .+?Constructor\]$/,c=/[.*+?^${}()|[\]\/\\]/g,f=RegExp(c.source),a=Object.prototype,p=Function.prototype.toString,s=a.toString,l=RegExp("^"+o(s).replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");t.exports=e},function(t){function n(t,n,e){if("function"!=typeof t)return r;if("undefined"==typeof n)return t;switch(e){case 1:return function(r){return t.call(n,r)};case 3:return function(r,e,o){return t.call(n,r,e,o)};case 4:return function(r,e,o,u){return t.call(n,r,e,o,u)};case 5:return function(r,e,o,u,i){return t.call(n,r,e,o,u,i)}}return function(){return t.apply(n,arguments)}}function r(t){return t}t.exports=n},function(t){t.exports=React},function(t){t.exports=d3}])});
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React Transition example
5 |
6 |
7 |
8 |
9 |
10 |
37 |
38 |
39 |
40 |
41 |
71 |
72 | Example based on react-tween-state
73 |
74 |
75 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | /* jshint node: true */
2 | module.exports = function(config) {
3 | config.set({
4 | basePath: '.',
5 |
6 | frameworks: ['jasmine'],
7 | browsers: ['PhantomJS'],
8 |
9 | files: [
10 | // shim to workaroud PhantomJS 1.x lack of `bind` support
11 | // see: https://github.com/ariya/phantomjs/issues/10522
12 | 'node_modules/es5-shim/es5-shim.js',
13 |
14 | // React is an external dependency of the component
15 | 'node_modules/react/dist/react-with-addons.js',
16 |
17 | 'spec/spec-helper.js',
18 | 'spec/**/*.spec.*',
19 | { pattern: 'lib/**/*', watched: true, included: false }
20 | ],
21 |
22 | preprocessors: {
23 | // add webpack as preprocessor
24 | 'spec/**/*.spec.*': ['webpack']
25 | },
26 |
27 | webpack: require('./webpack.config.js'),
28 |
29 | webpackServer: {
30 | noInfo: true
31 | },
32 |
33 | singleRun: true
34 | });
35 | };
36 |
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./react-transition');
2 |
--------------------------------------------------------------------------------
/lib/react-transition.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var d3 = require('d3');
3 | var forEach = require('lodash.foreach');
4 |
5 |
6 | /**
7 | Transition Component. It applies transitions on any prop change. Uses D3 interpolator functions underneath.
8 |
9 | @param props.component underlying component that will be initialized and animated
10 | @param [props.ease='linear'] easying function between transition states (available options: https://github.com/mbostock/d3/wiki/Transitions#d3_ease)
11 | @param [props.duration='500'] duration of the transition
12 |
13 | Usage:
14 |
15 | */
16 | module.exports = React.createClass({
17 | getDefaultProps: function () {
18 | return {
19 | ease: 'cubic-in-out',
20 | duration: 400
21 | };
22 | },
23 |
24 | startAnimation: function () {
25 | var start = new Date().getTime(),
26 | end = start + parseInt(this.props.duration, 10),
27 | finished = false,
28 | that = this;
29 |
30 | function animate () {
31 | if (finished || that.stopAnimation) { return; }
32 | var now = t();
33 |
34 | if (now > 1) { now = 1; finished = true; }
35 |
36 | that.animate(now);
37 | window.requestAnimationFrame(animate);
38 | }
39 |
40 | function t () {
41 | var now = new Date().getTime();
42 |
43 | return (now - start) / (end - start) || 0;
44 | }
45 |
46 | animate();
47 | },
48 |
49 | componentWillUnmount: function () {
50 | // stops the animation in progress
51 | this.stopAnimation = true;
52 | },
53 |
54 | getInitialState: function () {
55 | return this.props;
56 | },
57 |
58 | componentWillReceiveProps: function (newProps) {
59 | var that = this;
60 |
61 | var interpolators = {};
62 |
63 | forEach(newProps, function (value, propName) {
64 | if (propName === 'component' || propName === 'children' || propName === 'ease' || propName === 'duration' || propName.match(/^on(.+)/)) { return; }
65 | interpolators[propName] = d3.interpolate(that.state[propName], newProps[propName]);
66 | });
67 |
68 | this.interpolators = interpolators;
69 | this.startAnimation();
70 | },
71 |
72 | animate: function (t) {
73 | var newState = {},
74 | ease = d3.ease(this.props.ease);
75 |
76 | forEach(this.interpolators, function (interpolator, propName) {
77 | newState[propName] = interpolator(ease(t));
78 | });
79 |
80 | this.setState(newState);
81 | },
82 |
83 | render: function () {
84 | return React.createElement(this.props.component, this.state, this.props.children);
85 | }
86 | });
87 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-transition",
3 | "version": "1.0.3",
4 | "description": "React Component to perform transitions on prop changes",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "test": "./node_modules/.bin/jsxhint lib/ spec/ && ./node_modules/.bin/jshint lib/ spec/ && ./node_modules/karma/bin/karma start karma.conf.js",
8 | "watch-test": "./node_modules/karma/bin/karma start karma.conf.js --auto-watch --no-single-run",
9 | "build": "./node_modules/.bin/webpack --config webpack.build.config.js -p",
10 | "dev": "./node_modules/.bin/webpack-dev-server --config webpack.build.config.js --inline --hot"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git@github.com:pirelenito/react-transition.git"
15 | },
16 | "keywords": [
17 | "react",
18 | "reactjs",
19 | "react-component",
20 | "transition",
21 | "animation",
22 | "tween"
23 | ],
24 | "author": "Paulo Ragonha",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/pirelenito/react-transition/issues"
28 | },
29 | "homepage": "https://github.com/pirelenito/react-transition",
30 | "devDependencies": {
31 | "css-loader": "^0.9.1",
32 | "es5-shim": "^4.1.0",
33 | "jasmine": "^2.2.1",
34 | "jasmine-core": "^2.2.0",
35 | "jshint": "^2.6.0",
36 | "jsx-loader": "^0.12.2",
37 | "jsxhint": "^0.10.0",
38 | "karma": "^0.12.31",
39 | "karma-jasmine": "^0.3.5",
40 | "karma-phantomjs-launcher": "^0.1.4",
41 | "karma-webpack": "^1.5.0",
42 | "sass-loader": "^0.4.0-beta",
43 | "style-loader": "^0.8.3",
44 | "webpack": "^1.5.3",
45 | "webpack-dev-server": "^1.7.0"
46 | },
47 | "dependencies": {
48 | "d3": "^3.5.5",
49 | "lodash.foreach": "^3.0.1",
50 | "react": "^0.12.0",
51 | "underscore": "^1.6.0"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/spec/react-transition.spec.jsx:
--------------------------------------------------------------------------------
1 | var React = require('react/addons');
2 | var TestUtils = React.addons.TestUtils;
3 | var ReactTransition = require('../lib/react-transition');
4 |
5 |
6 | describe("ReactTransition", function() {
7 | var component;
8 |
9 | beforeEach(function() {
10 | component = TestUtils.renderIntoDocument(
11 |
12 | );
13 | });
14 |
15 | it("should render", function() {
16 | expect(component.getDOMNode().className).toEqual('react-transition');
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/spec/spec-helper.js:
--------------------------------------------------------------------------------
1 | beforeEach(function() {
2 |
3 | });
4 |
--------------------------------------------------------------------------------
/webpack.build.config.js:
--------------------------------------------------------------------------------
1 | /* jshint node: true */
2 | var config = require('./webpack.config');
3 |
4 |
5 | config.externals = {
6 | 'react': 'var React',
7 | 'd3': 'var d3'
8 | };
9 |
10 |
11 | module.exports = config;
12 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* jshint node: true */
2 | var path = require('path');
3 |
4 |
5 | module.exports = {
6 | context: path.join(__dirname),
7 | entry: './lib/index.js',
8 |
9 | output: {
10 | path: path.join(__dirname),
11 | filename: 'dist/react-transition.js',
12 | libraryTarget: 'umd',
13 | library: 'ReactTransition'
14 | },
15 |
16 | module: {
17 | loaders: [
18 | {
19 | test: /\.jsx$/,
20 | loader: 'jsx-loader?harmony'
21 | }
22 | ]
23 | }
24 | };
25 |
--------------------------------------------------------------------------------