fix(transition): Fix bug on right slide with only 2 visible cards

Fixes #3

Author: wfbn8821

lib/assets/styles.css

@@ -4,7 +4,7 @@
   box-sizing: border-box; }
   ._1H7C65wd8WJqBtCRmAfokb .rcs-center, ._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack {
     position: absolute;
-    transition: left 1s cubic-bezier(0, 0.7, 0.7, 1);
+    transition: left 1s cubic-bezier(0, 0.7, 0.7, 1), z-index 1s cubic-bezier(0, 0.7, 0.7, 1);
     box-sizing: border-box; }
 
 ._22yQcZhJvmCSA52vE9VrUe {

lib/index.js

@@ -78,7 +78,6 @@ var CardScroll = _react2.default.createClass({
         if (childrenCount == 0) {
             return defaultWidths;
         }
-        // anticipate the margin that we will add
         var container = this._container.getBoundingClientRect().width;
         // get first child as all children should be of equal width
         var card = _reactDom2.default.findDOMNode(this._child).getBoundingClientRect().width;
@@ -129,12 +128,12 @@ var CardScroll = _react2.default.createClass({
                         stackSpace: _this2.props.stackSpace
                     });
                     var position = offset;
-                    var zIndex = 0;
+                    var zIndex = -currentCard + index;
                     var className = "rcs-left-stack";
                     if (offset == 0) {
                         position = (index - currentCard) * _this2.widths.card;
                         if (index == lastCard && currentCard != lastCard) {
-                            zIndex = -1;
+                            zIndex = 0;
                         }
                         className = "rcs-center";
                     } else if (offset > 0) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-card-scroll",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A React component to navigate horizontally between cards of same width",
   "main": "lib/index.js",
   "scripts": {

src/index.js

@@ -102,12 +102,12 @@ let CardScroll = React.createClass({
                                 stackSpace: this.props.stackSpace
                             })
                             let position = offset
-                            let zIndex = 0
+                            let zIndex = -currentCard+index
                             let className = "rcs-left-stack"
                             if(offset==0){
                                 position = (index-currentCard)*this.widths.card
                                 if(index == lastCard && currentCard != lastCard){
-                                    zIndex = -1
+                                    zIndex = 0
                                 }
                                 className = "rcs-center"
                             } else if(offset>0){
@@ -126,7 +126,7 @@ let CardScroll = React.createClass({
             </div>
         )
     },
-
+    
     scrollCardsWrap(params){
         return () => this.scrollCards(params)
     },

src/styles.scss

@@ -9,7 +9,7 @@ $outPadding: $padding - $outMargin;
     box-sizing: border-box;
     :global(.rcs-center), :global(.rcs-left-stack), :global(.rcs-right-stack){
         position: absolute;
-        transition: left 1s cubic-bezier(0,.7,.7,1);
+        transition: left 1s cubic-bezier(0,.7,.7,1), z-index 1s cubic-bezier(0,.7,.7,1);
         box-sizing: border-box;
     }
 }