Add fade using css transitions

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 11 insertions, 11 deletions

diff --git a/css/style.css b/css/style.css
index 1f93b1b..68b8132 100755
--- a/css/style.css
+++ b/css/style.css
@@ -11,6 +11,12 @@
 	background-color: #4c4c4c;
 	background-color: rgba(0, 0, 0, .7);
 	z-index: 3000;
+	opacity: 0;
+	transition: opacity 250ms ease-in;
+}
+
+#videoplayer_overlay.show {
+	opacity: 1;
 }
 
 #videoplayer_outer_container {
diff --git a/src/viewer.js b/src/viewer.js
index 0ed4363..df07953 100755
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -51,7 +51,6 @@ var videoViewer = {
 			if (videoViewer.inline === null) {
 				var overlay = document.createElement('div');
 				overlay.id = 'videoplayer_overlay';
-				overlay.style.display = 'none';
 
 				var outer_container = document.createElement('div');
 				outer_container.id = 'videoplayer_outer_container';
@@ -76,9 +75,7 @@ var videoViewer = {
 					}
 				});
 
-				// show elements
-				overlay.style.display = 'block';
-				//overlay.fadeIn('fast'); TODO: convert to fadein!
+				setTimeout(() => { overlay.className = 'show'; }, 0);
 			} else {
 				var wrapper = document.createElement('div');
 				wrapper.id = 'videoplayer_view';
@@ -109,14 +106,11 @@ var videoViewer = {
 
 		},
 		hide: function () {
-			/* TODO: it was, so put the fade back in
-			$('#videoplayer_overlay').fadeOut('fast', function () {
-				$('#videoplayer_overlay').remove();
-			});
-			*/
 			var overlay = document.getElementById('videoplayer_overlay');
-			overlay.style.display = 'none';
-			overlay.parentElement.removeChild(overlay);
+			overlay.className = '';
+			setTimeout(() => {
+				overlay.parentElement.removeChild(overlay);
+			}, 500);
 		}
 	},
 	mime: null,