Fix width transition when dragging preview

www/code/code.css

@@ -18,11 +18,13 @@ body {
   display: inline-block;
   height: 100%;
   width: 50%;
-  transition: width 500ms, min-width 500ms, max-width 500ms;
   min-width: 20%;
   max-width: 80%;
   resize: horizontal;
 }
+.CodeMirror.transition {
+  transition: width 500ms, min-width 500ms, max-width 500ms;
+}
 .CodeMirror.fullPage {
   min-width: 100%;
   max-width: 100%;

www/code/code.less

@@ -22,7 +22,9 @@ body {
     display: inline-block;
     height: 100%;
     width: 50%;
-    transition: width @slideTime, min-width @slideTime, max-width @slideTime;
+    &.transition {
+        transition: width @slideTime, min-width @slideTime, max-width @slideTime;
+    }
     min-width: 20%;
     max-width: 80%;
     resize: horizontal;

www/code/main.js

@@ -144,6 +144,11 @@ define([
 
             var onModeChanged = function (mode) {
                 var $codeMirror = $iframe.find('.CodeMirror');
+                window.clearTimeout(APP.previewTo);
+                $codeMirror.addClass('transition');
+                APP.previewTo = window.setTimeout(function () {
+                    $codeMirror.removeClass('transition');
+                }, 500);
                 if (mode === "markdown") {
                     APP.$previewButton.show();
                     Cryptpad.getPadAttribute('previewMode', function (e, data) {
@@ -244,6 +249,11 @@ define([
                 $previewButton.attr('title', Messages.previewButtonTitle);
                 $previewButton.click(function () {
                     var $codeMirror = $iframe.find('.CodeMirror');
+                    window.clearTimeout(APP.previewTo);
+                    $codeMirror.addClass('transition');
+                    APP.previewTo = window.setTimeout(function () {
+                        $codeMirror.removeClass('transition');
+                    }, 500);
                     if (CodeMirror.highlightMode !== 'markdown') {
                         $previewContainer.show();
                     }