fix: Fix transition issue

Author: wfbn8821

lib/assets/styles.css

@@ -6,16 +6,34 @@
     position: absolute;
     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; }
+  ._1H7C65wd8WJqBtCRmAfokb .rcs-center:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin-left: 0.9375rem;
+    margin-right: 0.9375rem;
+    height: 100%;
+    background-color: #fff;
+    opacity: 0;
+    transition: opacity 1s, z-index 0s 1s;
+    z-index: -1; }
   ._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack:after, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack:after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
+    margin-left: 0.9375rem;
+    margin-right: 0.9375rem;
     height: 100%;
     background-color: #fff;
+    opacity: 0;
+    transition: opacity 1s, z-index 0s 1s;
     opacity: 0.7;
-    transition: opacity 1s cubic-bezier(0, 0.7, 0.7, 1); }
+    z-index: 0;
+    transition: opacity 1s, z-index 0s; }
 
 ._22yQcZhJvmCSA52vE9VrUe {
   position: fixed;

package.json

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

src/index.js

@@ -92,7 +92,7 @@ let CardScroll = React.createClass({
                     </div> 
                 :null}
 
-                
+
                 <div className={s.container}
                      style={{marginLeft: this.maxOffset, marginRight: this.maxOffset}}
                      ref={updateContainer}>

src/styles.scss

@@ -17,16 +17,32 @@ $grid-gutter-width:          1.875rem !default; // 30px
                 z-index 1s cubic-bezier(0,.7,.7,1);
         box-sizing: border-box;
     }
-    :global(.rcs-left-stack):after, :global(.rcs-right-stack):after{
+    @mixin overlay{
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
+        margin-left: ($grid-gutter-width / 2);
+        margin-right: ($grid-gutter-width / 2);
         height: 100%;
         background-color: #fff;
+        opacity: 0;
+        transition:
+                opacity 1s,
+                z-index 0s 1s;
+
+    }
+    :global(.rcs-center):after{
+        @include overlay;
+        z-index: -1;
+
+    }
+    :global(.rcs-left-stack):after, :global(.rcs-right-stack):after{
+        @include overlay;
         opacity: 0.7;
-        transition: opacity 1s cubic-bezier(0,.7,.7,1);
+        z-index: 0;
+        transition: opacity 1s, z-index 0s;
     }
 }