react-motion
Advanced tools
react-motion - npm Package Compare versions
Comparing version 0.4.2 to 0.4.3
| { | ||
| "name": "react-motion", | ||
| "version": "0.4.2", | ||
| "version": "0.4.3", | ||
| "homepage": "https://github.com/chenglou/react-motion", | ||
@@ -5,0 +5,0 @@ "authors": [ |
@@ -578,14 +578,14 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| 'use strict'; | ||
| /* WEBPACK VAR INJECTION */(function(global) {'use strict'; | ||
| var now = __webpack_require__(5), | ||
| global = typeof window === 'undefined' ? {} : window, | ||
| root = typeof window === 'undefined' ? global : window, | ||
| vendors = ['moz', 'webkit'], | ||
| suffix = 'AnimationFrame', | ||
| raf = global['request' + suffix], | ||
| caf = global['cancel' + suffix] || global['cancelRequest' + suffix]; | ||
| raf = root['request' + suffix], | ||
| caf = root['cancel' + suffix] || root['cancelRequest' + suffix]; | ||
| for (var i = 0; i < vendors.length && !raf; i++) { | ||
| raf = global[vendors[i] + 'Request' + suffix]; | ||
| caf = global[vendors[i] + 'Cancel' + suffix] || global[vendors[i] + 'CancelRequest' + suffix]; | ||
| for (var i = 0; !raf && i < vendors.length; i++) { | ||
| raf = root[vendors[i] + 'Request' + suffix]; | ||
| caf = root[vendors[i] + 'Cancel' + suffix] || root[vendors[i] + 'CancelRequest' + suffix]; | ||
| } | ||
@@ -645,7 +645,12 @@ | ||
| // to the native rAF function | ||
| return raf.call(global, fn); | ||
| return raf.call(root, fn); | ||
| }; | ||
| module.exports.cancel = function () { | ||
| caf.apply(global, arguments); | ||
| caf.apply(root, arguments); | ||
| }; | ||
| module.exports.polyfill = function () { | ||
| root.requestAnimationFrame = raf; | ||
| root.cancelAnimationFrame = caf; | ||
| }; | ||
| /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) | ||
@@ -1166,3 +1171,3 @@ /***/ }, | ||
| var destStyles = typeof styles === 'function' ? styles() : styles; | ||
| var destStyles = typeof styles === 'function' ? styles(defaultStyles) : styles; | ||
@@ -1169,0 +1174,0 @@ // this is special. for the first time around, we don't have a comparison |
@@ -6,2 +6,6 @@ Legend: | ||
| ### 0.4.3 (April 19th 2016) | ||
| - [F] `TransitionMotion` `styles` function not being passed `defaultStyles` value upon first call. #296 | ||
| - [I] `onRest` callback for `Motion`! | ||
| ### 0.4.2 (January 30th 2016) | ||
@@ -8,0 +12,0 @@ - [F] `TransitionMotion` keys merging bug. #264 |
@@ -202,3 +202,3 @@ 'use strict'; | ||
| var destStyles = typeof styles === 'function' ? styles() : styles; | ||
| var destStyles = typeof styles === 'function' ? styles(defaultStyles) : styles; | ||
@@ -205,0 +205,0 @@ // this is special. for the first time around, we don't have a comparison |
| // === basic reused types === | ||
| // type of the second parameter of `spring(val, config)` all fields are optional | ||
| "use strict"; | ||
| 'use strict'; | ||
| // TODO: add onRest. Not public yet | ||
| // the object returned by `spring(value, yourConfig)`. For internal usage only! | ||
| // the object returned by `spring(value, yourConfig)`. Used internally only! | ||
| // TODO: add onRest. Not public yet | ||
| // your typical style object given in props. Maps to a number or a spring config | ||
@@ -14,0 +9,0 @@ |
| { | ||
| "name": "react-motion", | ||
| "version": "0.4.2", | ||
| "version": "0.4.3", | ||
| "description": "A spring that solves your animation problems.", | ||
| "main": "lib/react-motion.js", | ||
| "peerDependencies": { | ||
| "react": ">=0.13.2 || ^0.14" | ||
| "react": ">=0.13.2 || ^0.14 || ^15.0.0" | ||
| }, | ||
@@ -32,6 +32,6 @@ "devDependencies": { | ||
| "phantomjs": "^1.9.17", | ||
| "react": ">=0.14.3", | ||
| "react-addons-test-utils": "^0.14.6", | ||
| "react": ">=15.0.1", | ||
| "react-addons-test-utils": "^15.0.1", | ||
| "react-codemirror": ">=0.1.2", | ||
| "react-dom": ">=0.14.3", | ||
| "react-dom": ">=15.0.1", | ||
| "react-hot-loader": "^1.2.8", | ||
@@ -38,0 +38,0 @@ "style-loader": "^0.12.4", |
@@ -41,18 +41,4 @@ # React-Motion | ||
| **For React-native**: previous react-motion v0.3.* supported a dedicated build for RN, which has now been made obsolete since RN v0.18. This library should Just Work under the new React-Native 0.18+. | ||
| **Works with React-Native v0.18+**. | ||
| ### Try things yourself | ||
| ```sh | ||
| git clone https://github.com/chenglou/react-motion.git | ||
| cd react-motion | ||
| npm install | ||
| ``` | ||
| To try the demos locally: | ||
| - with hot reloading (**slow, development version**): run `npm start`. | ||
| - Without hot reloading (**faster, production version**): run `npm run build-demos` and open the static `demos/demo_name/index.html` file directly. **Don't forget to use production mode when testing your animation's performance**! | ||
| To build the repo yourself: `npm run prerelease`. | ||
| ### Demos | ||
@@ -70,2 +56,14 @@ - [Simple Transition](http://chenglou.github.io/react-motion/demos/demo0-simple-transition) | ||
| ### Try the Demos Locally | ||
| ```sh | ||
| git clone https://github.com/chenglou/react-motion.git | ||
| cd react-motion | ||
| npm install | ||
| ``` | ||
| - With hot reloading (**slow, development version**): run `npm start`. | ||
| - Without hot reloading (**faster, production version**): run `npm run build-demos` and open the static `demos/demo_name/index.html` file directly. **Don't forget to use production mode when testing your animation's performance**! | ||
| To build the repo yourself: `npm run prerelease`. | ||
| ## What does this library try to solve? | ||
@@ -81,6 +79,4 @@ | ||
| **Coming from 0.3.* to 0.4.0? [Here](https://github.com/chenglou/react-motion/wiki)'s the upgrade guide.** | ||
| Exports: | ||
| - `spring`. | ||
| - `spring` | ||
| - `Motion` | ||
@@ -91,4 +87,6 @@ - `StaggeredMotion` | ||
| [Here](https://github.com/chenglou/react-motion/blob/026f4d18d3246e14abbf17bef0a9eda536934193/src/Types.js)'s the well-annotated public [Flow type](http://flowtype.org) definition file (you don't have to use Flow with React-motion, but the types help document the API below). | ||
| [Here](https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/Types.js)'s the well-annotated public [Flow type](http://flowtype.org) definition file (you don't have to use Flow with React-motion, but the types help document the API below). | ||
| P.S. using TypeScript? [Here](https://github.com/chenglou/react-motion/issues/300#issuecomment-207262071) are the React-motion TypeScript definitions! | ||
| --- | ||
@@ -110,3 +108,3 @@ | ||
| ##### - Presets for `{stiffness, damping}` | ||
| Commonly used spring configurations used like so: `spring(10, presets.wobbly)` or `spring(20, {...presets.gentle, precision: 0.1})`. [See here](https://github.com/chenglou/react-motion/blob/026f4d18d3246e14abbf17bef0a9eda536934193/src/presets.js). | ||
| Commonly used spring configurations used like so: `spring(10, presets.wobbly)` or `spring(20, {...presets.gentle, precision: 0.1})`. [See here](https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/presets.js). | ||
@@ -142,6 +140,9 @@ --- | ||
| ##### - onRest?: () => void | ||
| Optional. The callback that fires when the animation comes to a rest. | ||
| --- | ||
| ### <StaggeredMotion /> | ||
| Animates a collection of items whose values depend on each other, creating a natural, springy, "staggering" effect [like so](http://chenglou.github.io/react-motion/demos/demo1-chat-heads). This is preferred over hard-coding a delay for an array of `Motions` to achieve a similar (but less natural-looking) effect. | ||
| Animates a collection of (**fixed length**) items whose values depend on each other, creating a natural, springy, "staggering" effect [like so](http://chenglou.github.io/react-motion/demos/demo1-chat-heads). This is preferred over hard-coding a delay for an array of `Motions` to achieve a similar (but less natural-looking) effect. | ||
@@ -184,2 +185,4 @@ #### Usage | ||
| (No `onRest` for StaggeredMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.) | ||
| --- | ||
@@ -268,3 +271,3 @@ | ||
| - `styleThatLeft`: the e.g. `{key: ..., data: ..., value: ...}` object from the `styles` array, identified by `key`, that was present during a previous render, and that is now absent, thus triggering the call to `willLeave`. | ||
| - `styleThatLeft`: the e.g. `{key: ..., data: ..., style: ...}` object from the `styles` array, identified by `key`, that was present during a previous render, and that is now absent, thus triggering the call to `willLeave`. Note that the style property is exactly what you passed in `styles`, and is not interpolated. For example, if you passed a spring for `x` you will receive an object like `{x: {stiffness, damping, val, precision}}`. | ||
@@ -282,2 +285,4 @@ - Return: `null` to indicate you want the `TransitionStyle` gone immediately. A `Style` object to indicate you want to reach transition to the specified value(s) before killing the `TransitionStyle`. | ||
| (No `onRest` for TransitionMotion because we haven't found a good semantics for it yet. Voice your support in the issues section.) | ||
| --- | ||
@@ -284,0 +289,0 @@ |
@@ -10,2 +10,3 @@ /* @flow */ | ||
| import type {Element as ReactElement} from 'react'; | ||
| import type {PlainStyle, Style, Velocity, MotionProps} from './Types'; | ||
@@ -12,0 +13,0 @@ const msPerFrame = 1000 / 60; |
@@ -10,2 +10,3 @@ /* @flow */ | ||
| import type {Element as ReactElement} from 'react'; | ||
| import type {PlainStyle, Style, Velocity, StaggeredProps} from './Types'; | ||
@@ -12,0 +13,0 @@ |
@@ -11,2 +11,3 @@ /* @flow */ | ||
| import type {Element as ReactElement} from 'react'; | ||
| import type { | ||
@@ -220,3 +221,3 @@ PlainStyle, | ||
| const {defaultStyles, styles, willEnter, willLeave} = this.props; | ||
| const destStyles: Array<TransitionStyle> = typeof styles === 'function' ? styles() : styles; | ||
| const destStyles: Array<TransitionStyle> = typeof styles === 'function' ? styles(defaultStyles) : styles; | ||
@@ -223,0 +224,0 @@ // this is special. for the first time around, we don't have a comparison |
| /* @flow */ | ||
| import type {Element as ReactElement} from 'react'; | ||
| // === basic reused types === | ||
@@ -9,5 +10,4 @@ // type of the second parameter of `spring(val, config)` all fields are optional | ||
| precision?: number, | ||
| // TODO: add onRest. Not public yet | ||
| }; | ||
| // the object returned by `spring(value, yourConfig)`. Used internally only! | ||
| // the object returned by `spring(value, yourConfig)`. For internal usage only! | ||
| export type OpaqueConfig = { | ||
@@ -18,3 +18,2 @@ val: number, | ||
| precision: number, | ||
| // TODO: add onRest. Not public yet | ||
| }; | ||
@@ -35,2 +34,3 @@ // your typical style object given in props. Maps to a number or a spring config | ||
| children: (interpolatedStyle: PlainStyle) => ReactElement, | ||
| onRest?: () => void, | ||
| }; | ||
@@ -37,0 +37,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.77%
261460
- Number of package files
- increased by3.03%
34
- Lines of code
- increased by0.17%
3603
- Number of lines in readme file
- increased by1.67%
304
No dependency changes