diff --git a/www/code/code.css b/www/code/code.css index 589544493..8c6cb3240 100644 --- a/www/code/code.css +++ b/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%; diff --git a/www/code/code.less b/www/code/code.less index 04e3ab615..5f1aa2365 100644 --- a/www/code/code.less +++ b/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; diff --git a/www/code/main.js b/www/code/main.js index 5e9983fe6..5da41d054 100644 --- a/www/code/main.js +++ b/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(); }