Merge pull request #66 from ttjordan81/master

updated the css so the easeout does not have a jiggle

Author: officert

dist/vue-slideout-panel.js

@@ -342,27 +342,27 @@ module.exports = function (it) {
 /* 17 */
 /***/ (function(module, exports) {
 
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || Function("return this")() || (1,eval)("this");
-} catch(e) {
-	// This works if the window reference is available
-	if(typeof window === "object")
-		g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || Function("return this")() || (1,eval)("this");
+} catch(e) {
+	// This works if the window reference is available
+	if(typeof window === "object")
+		g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
 
 
 /***/ }),
@@ -11799,9 +11799,8 @@ var update = __webpack_require__(38)("081f8195", content, true, {});
 exports = module.exports = __webpack_require__(37)(false);
 // imports
 
-
 // module
-exports.push([module.i, ".slideout-panel-open{overflow:hidden}.slideout-panel{display:block;transition:opacity .15s}.slideout-panel .slideout-panel-bg{position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);transition:opacity .3s ease;overflow-y:hidden;z-index:100}.slideout-panel .slideout-panel-bg.transparent{background-color:transparent}.slideout-panel .slideout-panel-bg.fadeIn-enter{opacity:0}.slideout-panel .slideout-panel-bg.fadeIn-enter-to,.slideout-panel .slideout-panel-bg.fadeIn-leave{opacity:1}.slideout-panel .slideout-panel-bg.fadeIn-leave-to{opacity:0}.slideout-panel .slideout-panel-bg.fadeIn-leave-active{transition-delay:.4s}.slideout-panel .slideout-wrapper{position:static}.slideout-panel .slideout-wrapper .slideout{height:100%;position:fixed;top:0;bottom:0;background:#fff;transition:transform .18s ease-out;overflow-y:auto;transition-delay:.2s}.slideout-panel .slideout-wrapper .slideout.open-on-left{right:auto;left:0}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-enter{transform:translateX(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave{transform:translateX(0)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave-to{transform:translateX(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-top{right:0;left:0;bottom:auto;top:0}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-enter{transform:translateY(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave{transform:translateY(0)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave-to{transform:translateY(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-bottom{right:0;left:0;bottom:0;top:auto}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-enter{transform:translateY(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave{transform:translateY(0)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave-to{transform:translateY(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-right{right:0;left:auto}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-enter{transform:translateX(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-leave{transform:translateX(0)}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-leave-to{transform:translateX(100%)}", ""]);
+exports.push([module.i, ".slideout-panel-open{overflow:hidden}.slideout-panel{display:block;transition:opacity .15s}.slideout-panel .slideout-panel-bg{position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);transition:opacity .3s ease;overflow-y:hidden;z-index:100}.slideout-panel .slideout-panel-bg.transparent{background-color:transparent}.slideout-panel .slideout-panel-bg.fadeIn-enter{opacity:0}.slideout-panel .slideout-panel-bg.fadeIn-enter-to,.slideout-panel .slideout-panel-bg.fadeIn-leave{opacity:1}.slideout-panel .slideout-panel-bg.fadeIn-leave-to{opacity:0}.slideout-panel .slideout-panel-bg.fadeIn-leave-active{transition-delay:.4s}.slideout-panel .slideout-wrapper{position:static}.slideout-panel .slideout-wrapper .slideout{height:100%;position:fixed;top:0;bottom:0;background:#fff;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);transition-duration: 0.8s;overflow-y:auto;transition-delay:.2s}.slideout-panel .slideout-wrapper .slideout.open-on-left{right:auto;left:0}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-enter{transform:translateX(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave{transform:translateX(0)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave-to{transform:translateX(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-left.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-top{right:0;left:0;bottom:auto;top:0}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-enter{transform:translateY(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave{transform:translateY(0)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave-to{transform:translateY(-100%)}.slideout-panel .slideout-wrapper .slideout.open-on-top.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-bottom{right:0;left:0;bottom:0;top:auto}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-enter{transform:translateY(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave{transform:translateY(0)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave-to{transform:translateY(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-bottom.slideIn-leave-active{transition-delay:0}.slideout-panel .slideout-wrapper .slideout.open-on-right{right:0;left:auto}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-enter{transform:translateX(100%)}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-enter-to,.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-leave{transform:translateX(0)}.slideout-panel .slideout-wrapper .slideout.open-on-right.slideIn-leave-to{transform:translateX(100%)}", ""]);
 
 // exports
 

src/components/SlideoutPanel/styles.less

@@ -52,7 +52,8 @@
       top: 0;
       bottom: 0;
       background: white;
-      transition: transform 0.18s ease-out;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      transition-duration: 0.8s;
       overflow-y: auto;
       transition-delay: 200ms;