@ptb/animated-transition - npm Package Compare versions

Comparing version 2018.3.28-3 to 2018.3.28-4

index.js

@@ -6,2 +6,3 @@ "use strict";
 });
+exports.classNames = undefined;
 
@@ -35,3 +36,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
   "animation-fill-mode": "forwards",
-  "background-color": "#fff",
+  "background-color": "inherit",
   "pointer-events": "none",
@@ -45,7 +46,7 @@ "position": "absolute",
 }, {
-  "box-shadow": "rgba(0,0,0,.2) -12px 0 14px -12px"
+  "box-shadow": "-8px 0 8px -2px rgba(0,0,0,.2)"
 }, {
   "background-color": "rgba(0,0,0,.1)",
   "bottom": "0",
-  "content": "",
+  "content": "' '",
   "left": "0",
@@ -75,2 +76,5 @@ "opacity": "0",
   };
+}, {
+  "overflow": "hidden",
+  "position": "relative"
 }];
@@ -81,14 +85,14 @@
     "back": {
-      "exit": (0, _style.css)(_extends({}, slide[0], slide[1], slide[3], {
+      "exit": _extends({}, slide[0], slide[1], slide[3], {
         "animation-name": (0, _style.key)(slide[6]("0", "100%"))
-      })),
-      "next": (0, _style.css)(_extends({}, slide[0], slide[2], {
-        ":after": _extends({}, slide[0], slide[2], slide[4], {
+      }),
+      "next": _extends({}, slide[0], slide[2], {
+        ":after": _extends({}, slide[0], slide[1], slide[4], {
           "animation-name": (0, _style.key)(slide[5]("1", "0"))
         }),
         "animation-name": (0, _style.key)(slide[6]("-20%", "0"))
-      }))
+      })
     },
     "fore": {
-      "exit": (0, _style.css)(_extends({}, slide[0], slide[2], {
+      "exit": _extends({}, slide[0], slide[2], {
         ":after": _extends({}, slide[0], slide[1], slide[4], {
@@ -98,6 +102,6 @@ "animation-name": (0, _style.key)(slide[5]("0", "1"))
         "animation-name": (0, _style.key)(slide[6]("0", "-20%"))
-      })),
-      "next": (0, _style.css)(_extends({}, slide[0], slide[1], slide[3], {
+      }),
+      "next": _extends({}, slide[0], slide[1], slide[3], {
         "animation-name": (0, _style.key)(slide[6]("100%", "0"))
-      }))
+      })
     }
@@ -107,2 +111,4 @@ }
 
+exports.classNames = classNames;
+
 var _class = function (_Component) {
@@ -129,7 +135,7 @@ _inherits(_class, _Component);
           return (0, _react.cloneElement)(a, { "classNames": {
-              "enterActive": classNames[anim][dir].next,
-              "exitActive": classNames[anim][dir].exit
+              "enterActive": (0, _style.css)(classNames[anim][dir].next),
+              "exitActive": (0, _style.css)(classNames[anim][dir].exit)
             } });
         },
-        "component": _react.Fragment
+        "className": (0, _style.css)(slide[7])
       }, (0, _react.createElement)(_CSSTransition2.default, {
@@ -136,0 +142,0 @@ "key": this.props.location.key,

package.json

@@ -32,3 +32,3 @@ {
   },
-  "version": "2018.3.28-3"
+  "version": "2018.3.28-4"
 }

src/index.js

@@ -10,3 +10,3 @@ import { cloneElement, Component, Fragment, createElement as h } from "react"
     "animation-fill-mode": "forwards",
-    "background-color": "#fff",
+    "background-color": "inherit",
     "pointer-events": "none",
@@ -23,3 +23,3 @@ "position": "absolute",
   {
-    "box-shadow": "rgba(0,0,0,.2) -12px 0 14px -12px"
+    "box-shadow": "-8px 0 8px -2px rgba(0,0,0,.2)"
   },
@@ -29,3 +29,3 @@ {
     "bottom": "0",
-    "content": "",
+    "content": "' '",
     "left": "0",
@@ -53,3 +53,7 @@ "opacity": "0",
     }
-  })
+  }),
+  {
+    "overflow": "hidden",
+    "position": "relative"
+  }
 ]
@@ -60,3 +64,3 @@
     "back": {
-      "exit": css ({
+      "exit": {
         ... slide[0],
@@ -66,4 +70,4 @@ ... slide[1],
         "animation-name": key (slide[6] ("0", "100%"))
-      }),
-      "next": css ({
+      },
+      "next": {
         ... slide[0],
@@ -73,3 +77,3 @@ ... slide[2],
           ... slide[0],
-          ... slide[2],
+          ... slide[1],
           ... slide[4],
@@ -79,6 +83,6 @@ "animation-name": key (slide[5] ("1", "0"))
         "animation-name": key (slide[6] ("-20%", "0"))
-      })
+      }
     },
     "fore": {
-      "exit": css ({
+      "exit": {
         ... slide[0],
@@ -93,4 +97,4 @@ ... slide[2],
         "animation-name": key (slide[6] ("0", "-20%"))
-      }),
-      "next": css ({
+      },
+      "next": {
         ... slide[0],
@@ -100,3 +104,3 @@ ... slide[1],
         "animation-name": key (slide[6] ("100%", "0"))
-      })
+      }
     }
@@ -106,2 +110,4 @@ }
 
+export { classNames }
+
 export default class extends Component {
@@ -115,6 +121,6 @@ render () {
           cloneElement (a, { "classNames": {
-            "enterActive": classNames[anim][dir].next,
-            "exitActive": classNames[anim][dir].exit
+            "enterActive": css (classNames[anim][dir].next),
+            "exitActive": css (classNames[anim][dir].exit)
           } }),
-        "component": Fragment
+        "className": css (slide[7])
       },
@@ -121,0 +127,0 @@ h (CSSTransition,

No alert changes

Improved metrics

Total package byte prevSize

9272

increased by1.99%

Lines of code

247

increased by4.22%

No dependency changes