From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 23 Aug 2018 16:49:05 +0000 (+0200)
Subject: done #2192 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0e2436e08c60e5e78ae4be070ad6f4e0fbfd684e;p=fluidbook-html5.git

done #2192 @2
---

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 6553d836..3655953d 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -507,6 +507,9 @@ Fluidbook.prototype = {
             duration = animationDuration * 0.3;
         }
 
+        var transitionIn = {transitionDuration: duration + 'ms', transitionDelay: delay + 'ms'};
+        var transitionOut = {transitionDuration: (duration * .5) + 'ms', transitionDelay: '0ms'};
+
         var left = true, right = true;
         if (this.displayOnePage) {
             right = true;
@@ -521,16 +524,17 @@ Fluidbook.prototype = {
         var s = $("#shadow,#edges");
 
         if (left) {
-            $(s).children(".left:hidden").delay(delay).fadeIn(duration);
+            $(s).children(".left.hidden").css(transitionIn).removeClass('hidden');
         } else {
-            $(s).children(".left:visible").fadeOut(duration);
+            $(s).children(".left:not('.hidden')").css(transitionOut).addClass('hidden');
         }
 
         if (right) {
-            $(s).children(".right:hidden").delay(delay).fadeIn(duration);
+            $(s).children(".right.hidden").css(transitionIn).removeClass('hidden');
         } else {
-            $(s).children(".right:visible").fadeOut(duration);
+            $(s).children(".right:not('.hidden')").css(transitionOut).addClass('hidden');
         }
+
     },
     showAllButtons: function () {
         $("#next,#previous").addClass('help').show();
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 5defefa1..ace94e24 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -394,6 +394,7 @@ body, html {
 		position: absolute;
 		left: 0;
 		opacity: @shadow-opacity;
+		.shadowedge-fade-item();
 
 		&.bottom {
 			bottom: -@shadow-height+@shadow-offset;
@@ -464,6 +465,7 @@ body, html {
 	@edge-scale: 1;
 
 	> .edge {
+		.shadowedge-fade-item();
 		position: absolute;
 		top: 0;
 		height: 100%;
diff --git a/style/mixins.less b/style/mixins.less
index 493f641c..ae1e82c4 100644
--- a/style/mixins.less
+++ b/style/mixins.less
@@ -50,10 +50,17 @@
 		}
 	}
 
-	.chapters{
-		a:hover{
+	.chapters {
+		a:hover {
 
 			background-color: @button;
 		}
 	}
+}
+
+.shadowedge-fade-item() {
+	transition-property: opacity;
+	&.hidden {
+		opacity: 0;
+	}
 }
\ No newline at end of file