Center vertically slides in present mode and checkbox to disable transitions

customize.dist/translations/messages.fr.js

@@ -107,6 +107,7 @@ define(function () {
     out.printDate = "Afficher la date";
     out.printTitle = "Afficher le titre du pad";
     out.printCSS = "Personnaliser l'apparence (CSS):";
+    out.printTransition = "Activer les animations de transition";
 
     out.slideOptionsTitle = "Personnaliser la présentation";
     out.slideOptionsButton = "Enregistrer (Entrée)";

customize.dist/translations/messages.js

@@ -109,6 +109,7 @@ define(function () {
     out.printDate = "Display the date";
     out.printTitle = "Display the pad title";
     out.printCSS = "Custom style rules (CSS):";
+    out.printTransition = "Enable transition animations";
 
     out.slideOptionsTitle = "Customize your slides";
     out.slideOptionsButton = "Save (enter)";

www/slide/main.js

@@ -188,6 +188,7 @@ define([
                     title: false,
                     slide: false,
                     date: false,
+                    transition: true,
                     style: ''
                 };
 
@@ -220,6 +221,13 @@ define([
                 }).appendTo($p).css('width', 'auto');
                 $('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
                 $p.append($('<br>'));
+                // Transition
+                $('<input>', {type: 'checkbox', id: 'checkTransition', checked: slideOptionsTmp.transition}).on('change', function () {
+                    var c = this.checked;
+                    slideOptionsTmp.transition = c;
+                }).appendTo($p).css('width', 'auto');
+                $('<label>', {'for': 'checkTransition'}).text(Messages.printTransition).appendTo($p);
+                $p.append($('<br>'));
                 // CSS
                 $('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
                 $p.append($('<br>'));

www/slide/slide.css

@@ -168,13 +168,16 @@ body .CodeMirror-focused .cm-matchhighlight {
 }
 .cp div.modal #content,
 .cp div#modal #content {
-  transition: margin-left 1s;
   font-size: 20vh;
   position: relative;
   height: 100%;
   overflow: visible;
   white-space: nowrap;
 }
+.cp div.modal #content.transition,
+.cp div#modal #content.transition {
+  transition: margin-left 1s;
+}
 .cp div.modal #content .slide-frame,
 .cp div#modal #content .slide-frame {
   display: inline-block;
@@ -198,10 +201,11 @@ body .CodeMirror-focused .cm-matchhighlight {
 }
 .cp div.modal #content .slide-container,
 .cp div#modal #content .slide-container {
-  display: inline-block;
+  display: inline-flex;
   height: 100%;
   width: 100vw;
   text-align: center;
+  vertical-align: top;
 }
 .cp div.modal .center,
 .cp div#modal .center {

www/slide/slide.js

@@ -184,6 +184,10 @@ define([
                 $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
             }
         });
+        $content.removeClass('transition');
+        if (options.transition) {
+            $content.addClass('transition');
+        }
         //$content.find('.' + slideClass).hide();
         //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
         $content.css('margin-left', -(i*100)+'vw');

www/slide/slide.less

@@ -161,7 +161,9 @@ div.modal, div#modal {
         width: 100%;
     }
     #content {
-        transition: margin-left 1s;
+        &.transition {
+            transition: margin-left 1s;
+        }
         font-size: 20vh;
         position: relative;
         height: 100%;
@@ -191,9 +193,10 @@ div.modal, div#modal {
             margin: auto;
         }
         .slide-container {
-            display: inline-block;
+            display: inline-flex;
             height: 100%; width: 100vw;
             text-align: center;
+            vertical-align: top;
         }
     }