Add transitions in present mode

www/slide/slide.css

@@ -88,7 +88,6 @@ body .CodeMirror-focused .cm-matchhighlight {
   display: block !important;
   padding: 2.5%;
   margin-top: 7.228vw;
-  margin-bottom: 7.228vw;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   height: 56.25vw;
@@ -123,6 +122,7 @@ body .CodeMirror-focused .cm-matchhighlight {
   font-size: 30px;
   opacity: 0.6;
   display: none;
+  z-index: 9001;
 }
 .cp div.modal .button:hover,
 .cp div#modal .button:hover {
@@ -133,7 +133,6 @@ body .CodeMirror-focused .cm-matchhighlight {
 .cp div#modal #button_exit {
   left: 20px;
   top: 20px;
-  z-index: 9001;
 }
 .cp div.modal #button_left,
 .cp div#modal #button_left {
@@ -159,10 +158,14 @@ body .CodeMirror-focused .cm-matchhighlight {
 }
 .cp div.modal #content,
 .cp div#modal #content {
+  transition: margin-left 1s;
   font-size: 20vh;
+  position: relative;
+  height: 100%;
 }
 .cp div.modal #content .slide-frame,
 .cp div#modal #content .slide-frame {
+  display: inline-block;
   box-sizing: border-box;
   border: 1px solid white;
   vertical-align: middle;
@@ -179,11 +182,13 @@ body .CodeMirror-focused .cm-matchhighlight {
   max-height: 100vh;
   max-width: 177.78vh;
   margin: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+}
+.cp div.modal #content .slide-container,
+.cp div#modal #content .slide-container {
+  display: inline-block;
+  height: 100%;
+  width: 100vw;
+  text-align: center;
 }
 .cp div.modal .center,
 .cp div#modal .center {
@@ -198,6 +203,11 @@ body .CodeMirror-focused .cm-matchhighlight {
 .cp div#modal.shown {
   display: block;
 }
+.cp div#modal #content .slide-frame,
+.cp #print .slide-frame {
+  text-align: left;
+  position: relative;
+}
 .cp div#modal #content .slide-frame p,
 .cp #print .slide-frame p,
 .cp div#modal #content .slide-frame li,

www/slide/slide.js

@@ -126,7 +126,7 @@ define([
         if (typeof(Slide.content) !== 'string') { return; }
 
         var c = Slide.content;
-        var m = '<span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span><span class="'+slideClass+'">')+'</span>';
+        var m = '<span class="slide-container"><span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span></span><span class="slide-container"><span class="'+slideClass+'">')+'</span></span>';
 
         var Dom = domFromHTML('<div id="content">' + m + '</div>');
         removeListeners(Dom.body);
@@ -153,8 +153,9 @@ define([
                 $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
             }
         });
-        $content.find('.' + slideClass).hide();
-        $content.find('.' + slideClass + ':eq( ' + i + ' )').show();
+        //$content.find('.' + slideClass).hide();
+        //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
+        $content.css('margin-left', -(i*100)+'vw');
         change(Slide.lastIndex, Slide.index);
     };
 

www/slide/slide.less

@@ -92,7 +92,7 @@ body {
         padding: 2.5%;
         // margin-top: ~"calc(((100vh - 56.25vw)/2))";
         margin-top: 7.228vw;
-        margin-bottom: 7.228vw;
+        //margin-bottom: 7.228vw;
         // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
         border-top: 1px solid black;
         border-bottom: 1px solid black;
@@ -126,6 +126,7 @@ div.modal, div#modal {
         font-size: 30px;
         opacity: 0.6;
         display: none;
+        z-index: 9001;
     }
     .button:hover {
         opacity: 1;
@@ -134,7 +135,6 @@ div.modal, div#modal {
     #button_exit {
         left: 20px;
         top: 20px;
-        z-index: 9001;
     }
     #button_left {
         left: 6vw;
@@ -156,8 +156,14 @@ div.modal, div#modal {
         width: 100%;
     }
     #content {
-        font-size: 20vh;
+        transition: margin-left 1s;
+        font-size: 20vh;
        // position: absolute;
+        // top:0;bottom:0; // vertical center
+        // left:0;right:0; // horizontal center
+        position: relative;
+        height: 100%;
         .slide-frame {
+            display: inline-block;
             box-sizing: border-box;
             border: 1px solid white;
 
@@ -178,9 +184,15 @@ div.modal, div#modal {
             max-height: 100vh;
             max-width: 177.78vh; // 16/9 = 1.778
             margin: auto;
-            position: absolute;
-            top:0;bottom:0; // vertical center
-            left:0;right:0; // horizontal center
+        }
+        .slide-container {
+            // position: absolute;
+            // top:0;
+            // bottom:0; // vertical center
+            // left:0;right:0; // horizontal center
+            display: inline-block;
+            height: 100%; width: 100vw;
+            text-align: center;
         }
     }
 
@@ -283,6 +295,8 @@ div#modal #content, #print {
             text-align: center;
             .size(1);
         }
+        text-align: left;
+        position: relative;
     }
 }
 }