react-crossfade-image - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

example/App.js

 import React, { Component } from "react";
 import ReactDOM from "react-dom";
-import CrossfadeImage from "../";
+import CrossfadeImage from "../index.js";
 
@@ -31,3 +31,3 @@ const images = [
           src={images[this.state.imageIndex]}
-          duration={500}
+          duration={1000}
           timingFunction={"ease-out"}
@@ -34,0 +34,0 @@ />

index.es5.js

@@ -0,1 +1,3 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 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; }; }();
@@ -22,3 +24,3 @@
       topSrc: props.src,
-      topOpacity: 1,
+      bottomOpacity: 0,
       bottomSrc: props.src
@@ -37,10 +39,15 @@ };
       if (newSrc !== oldSrc) {
-        this.setState({ bottomSrc: newSrc, topOpacity: 0 }, function () {
-          if (!_this2.timeout) clearTimeout(_this2.timeout);
-          _this2.timeout = setTimeout(function () {
-            return _this2.setState({
-              topSrc: newSrc,
-              topOpacity: 1
-            });
-          }, _this2.props.duration + _this2.props.delay);
+        // Reset the component everytime we receive new prop, to
+        // cancel out any animation that's still going on
+        this.setState({ bottomSrc: false, topSrc: false }, function () {
+          return _this2.setState(
+          // Opacity less than 1 takes precendence in stacking order
+          { bottomSrc: oldSrc, topSrc: newSrc, bottomOpacity: 0.99 }, function () {
+            // One of the few times setTimeout does wonders, this is for
+            // getting fade out transition without css keyframe
+            if (!_this2.timeout) clearTimeout(_this2.timeout);
+            _this2.timeout = setTimeout(function () {
+              return _this2.setState({ bottomOpacity: 0 });
+            }, 10);
+          });
         });
@@ -59,3 +66,3 @@ }
           topSrc = _state.topSrc,
-          topOpacity = _state.topOpacity,
+          bottomOpacity = _state.bottomOpacity,
           bottomSrc = _state.bottomSrc;
@@ -65,12 +72,14 @@
         "div",
-        { style: style },
-        React.createElement("img", {
-          style: {
-            opacity: topOpacity,
-            position: "absolute",
-            transition: "opacity " + duration / 1000 + "s " + timingFunction + " " + delay / 1000 + "s"
-          },
+        { style: { position: "relative" } },
+        topSrc && React.createElement("img", {
+          style: _extends({}, style, { position: "absolute" }),
           src: topSrc
         }),
-        React.createElement("img", { src: bottomSrc })
+        bottomSrc && React.createElement("img", {
+          style: _extends({}, style, {
+            opacity: bottomOpacity,
+            transition: "opacity " + duration / 1000 + "s " + timingFunction + " " + delay / 1000 + "s"
+          }),
+          src: bottomSrc
+        })
       );
@@ -95,5 +104,5 @@ }
 CrossfadeImage.defaultProps = {
-  duration: 300,
+  duration: 500,
   timingFunction: "ease",
   delay: 0
 };

index.js

@@ -9,3 +9,3 @@ import React, { Component } from "react";
       topSrc: props.src,
-      topOpacity: 1,
+      bottomOpacity: 0,
       bottomSrc: props.src
@@ -18,13 +18,19 @@ };
     if (newSrc !== oldSrc) {
-      this.setState({ bottomSrc: newSrc, topOpacity: 0 }, () => {
-        if (!this.timeout) clearTimeout(this.timeout);
-        this.timeout = setTimeout(
-          () =>
-            this.setState({
-              topSrc: newSrc,
-              topOpacity: 1
-            }),
-          this.props.duration + this.props.delay
-        );
-      });
+      // Reset the component everytime we receive new prop, to
+      // cancel out any animation that's still going on
+      this.setState({ bottomSrc: false, topSrc: false }, () =>
+        this.setState(
+          // Opacity less than 1 takes precendence in stacking order
+          { bottomSrc: oldSrc, topSrc: newSrc, bottomOpacity: 0.99 },
+          () => {
+            // One of the few times setTimeout does wonders, this is for
+            // getting fade out transition without css keyframe
+            if (!this.timeout) clearTimeout(this.timeout);
+            this.timeout = setTimeout(
+              () => this.setState({ bottomOpacity: 0 }),
+              10
+            );
+          }
+        )
+      );
     }
@@ -34,14 +40,24 @@ }
     const { duration, timingFunction, delay, style } = this.props;
-    const { topSrc, topOpacity, bottomSrc } = this.state;
+    const { topSrc, bottomOpacity, bottomSrc } = this.state;
     return (
-      <div style={style}>
-        <img
-          style={{
-            opacity: topOpacity,
-            position: "absolute",
-            transition: `opacity ${duration / 1000}s ${timingFunction} ${delay / 1000}s`
-          }}
-          src={topSrc}
-        />
-        <img src={bottomSrc} />
+      <div style={{ position: "relative" }}>
+        {topSrc &&
+          <img
+            style={{
+              ...style,
+              ...{ position: "absolute" }
+            }}
+            src={topSrc}
+          />}
+        {bottomSrc &&
+          <img
+            style={{
+              ...style,
+              ...{
+                opacity: bottomOpacity,
+                transition: `opacity ${duration / 1000}s ${timingFunction} ${delay / 1000}s`
+              }
+            }}
+            src={bottomSrc}
+          />}
       </div>
@@ -61,5 +77,5 @@ );
 CrossfadeImage.defaultProps = {
-  duration: 300,
+  duration: 500,
   timingFunction: "ease",
   delay: 0
 };

package.json

 {
   "name": "react-crossfade-image",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Simple React component for crossfading images",
@@ -34,2 +34,3 @@ "main": "index.es5.js",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "rimraf": "^2.6.1",
@@ -36,0 +37,0 @@ "webpack": "^2.5.1",

README.md

@@ -35,3 +35,3 @@ # react-crossfade-image
 ### style
-Styling for the image wrapper
+Custom styling for the image - e.g. maxWidth: '100%', maxHeight: '100%' for responsive image scaling
 
@@ -38,0 +38,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

129683

increased by9.83%

Lines of code

242

increased by11.01%

Worsened metrics

Dev dependency count

9

increased by12.5%

No dependency changes