From 2ba43622767a6c7e3732fbc33e754fa922cc435f Mon Sep 17 00:00:00 2001 From: Jason Brown Date: Tue, 13 Feb 2018 14:15:40 -0800 Subject: [PATCH] Fix transform styles on initial mount. --- examples/interactive-docs/example.js | 1 + examples/interactive-docs/index.html | 38 +- package.json | 5 +- src/createAnimatedComponent.js | 5 +- src/injectable/ApplyAnimatedValues.js | 6 +- src/targets/react-dom.js | 2 +- yarn.lock | 2587 +++++++++++++++++++++++++ 7 files changed, 2620 insertions(+), 24 deletions(-) create mode 100644 yarn.lock diff --git a/examples/interactive-docs/example.js b/examples/interactive-docs/example.js index 71b5820..c7dd36e 100644 --- a/examples/interactive-docs/example.js +++ b/examples/interactive-docs/example.js @@ -2,3 +2,4 @@ global.React = require('react'); global.ReactDOM = require('react-dom'); global.Animated = require('../../lib/targets/react-dom'); +global.createClass = require("create-react-class"); \ No newline at end of file diff --git a/examples/interactive-docs/index.html b/examples/interactive-docs/index.html index abb928c..3ce8f79 100644 --- a/examples/interactive-docs/index.html +++ b/examples/interactive-docs/index.html @@ -185,7 +185,7 @@ var previousScript = document.getElementsByClassName('Example' + EXAMPLE_COUNT)[0].innerText; } else { var previousScript = ` - examplify(React.createClass({ + examplify(createClass({ getInitialState: function() { return { anim: new Animated.Value(0), // ignore @@ -210,7 +210,7 @@ var code = document.createElement('div'); script.parentNode.insertBefore(code, script); - var Example = React.createClass({ + var Example = createClass({ render() { return (
@@ -223,7 +223,7 @@

-
{'React.createClass({'}
+
{'createClass({'}
{script.innerText .trim() .split(/\n/g) @@ -257,7 +257,7 @@

Animated.Value

The basic building block of this library is Animated.Value. This is a variable that's going to drive the animation. You use it like a normal value in style attribute. Only animated components such as Animated.div will understand it.