Issue #2790855 by tedbow, drpal, xjm, tkoleary, tim.plunkett, Wim Leers, Cottser: Rework animation for standard dialog system

core/modules/outside_in/css/outside_in.module.css

@@ -80,3 +80,11 @@
   box-shadow: 2px 2px #ddd;
 }
 
+.offcanvas-lining {
+  background: #fff;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+}

core/modules/outside_in/js/offcanvas.js

@@ -18,6 +18,8 @@
    */
   var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
 
+  var $mainCanvasWrapper = $('#main-canvas-wrapper');
+
   /**
    * Resets the size of the dialog.
    *
@@ -81,12 +83,11 @@
   function bodyPadding(event) {
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
-    var $body = $('body');
 
     var width = $widget.outerWidth();
-    var bodyPadding = $body.css('padding-' + edge);
-    if (width !== bodyPadding) {
-      $body.css('padding-' + edge, width + 'px');
+    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
+    if (width !== mainCanvasPadding) {
+      $mainCanvasWrapper.css('padding-' + edge, width + 'px');
       $widget.attr('data-offset-' + edge, width);
       displace();
     }
@@ -125,7 +126,7 @@
       if ($element.is('#drupal-offcanvas')) {
         $(document).off('.outsidein');
         $(window).off('.outsidein');
-        $('body').css('padding-' + edge, 0);
+        $mainCanvasWrapper.css('padding-' + edge, 0);
       }
     }
   });

core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php

@@ -49,6 +49,8 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
       'settings' => $this->settings,
       'data' => $this->getRenderedContent(),
       'dialogOptions' => $this->dialogOptions,
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
   }
 

core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php

@@ -46,6 +46,8 @@ class OffCanvasDialogTest extends AjaxTestBase {
           'draggable' => FALSE,
           'drupalAutoButtons' => FALSE,
         ],
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
 
     // Emulate going to the JS version of the page and check the JSON response.

core/modules/outside_in/templates/outside-in-page-wrapper.html.twig

@@ -18,5 +18,6 @@
         {{ children }}
       </div>
     </div>
+    <div class="offcanvas-lining"></div>
   {% endspaceless %}
 {% endif %}

core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php

@@ -31,6 +31,8 @@ class OpenOffCanvasDialogCommandTest extends UnitTestCase {
         'draggable' => FALSE,
         'drupalAutoButtons' => FALSE,
       ],
+      'effect' => 'fade',
+      'speed' => 1000,
     ];
     $this->assertEquals($expected, $command->render());
   }