v0.1.1 Change to use scale as animation

rwu823 · Jun 5, 2016 · 9166f52 · 9166f52
1 parent e99bf97
commit 9166f52
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/demo/react-ripples.js b/demo/react-ripples.js
@@ -8419,13 +8419,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	      });
 
 	      setTimeout(function () {
-	        var size = Math.max(offsetWidth, offsetHeight) * 3;
+	        var size = Math.max(offsetWidth, offsetHeight);
 
 	        _this.setState({
 	          rippleStyle: {
-	            width: size,
-	            height: size,
-	            left: 0, top: 0,
+	            left: left, top: top,
+	            transform: rippleStyle.transform + ' scale(' + size / 9 + ')',
 	            opacity: 0,
 	            transition: 'all ' + during + 'ms'
 	          }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-ripples",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "The ripple effect everything",
   "main": "dist/react-ripples.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -51,13 +51,12 @@ class Ripples extends React.Component {
     })
 
     setTimeout(()=> {
-      const size = Math.max(offsetWidth, offsetHeight) * 3
+      const size = Math.max(offsetWidth, offsetHeight)
 
       this.setState({
         rippleStyle: {
-          width: size,
-          height: size,
-          left: 0, top: 0,
+          left, top,
+          transform: `${rippleStyle.transform} scale(${size/9})`,
           opacity: 0,
           transition: `all ${during}ms`,
         }