Restore transform scope for push transitions so transitionend works correctly

Due to the content's initial transform:none the transitionend listener didn't work for the content container.
This is fixed now by using the has-transition-push class that is also used in the positions mixin to limit the translate to push transitions.

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index ba5e7e900efeb5c238aa33a10146d55bc99c893d..6475cd8b3b0be433f1785b16365474bdbcc43002 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -196,7 +196,9 @@ $maincontent-class: 'off-canvas-content' !default;
 
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
-      transform: translateX($size);
+      &.has-transition-push {
+        transform: translateX($size);
+      }
     }
   }
   @else if $position == right {
@@ -218,7 +220,9 @@ $maincontent-class: 'off-canvas-content' !default;
 
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
-      transform: translateX(-$size);
+      &.has-transition-push {
+        transform: translateX(-$size);
+      }
     }
   }
   @else if $position == top {
@@ -241,7 +245,9 @@ $maincontent-class: 'off-canvas-content' !default;
 
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
-      transform: translateY($size);
+      &.has-transition-push {
+        transform: translateY($size);
+      }
     }
   }
   @else if $position == bottom {
@@ -264,7 +270,9 @@ $maincontent-class: 'off-canvas-content' !default;
 
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
-      transform: translateY(-$size);
+      &.has-transition-push {
+        transform: translateY(-$size);
+      }
     }
   }
 
@@ -295,9 +303,9 @@ $maincontent-class: 'off-canvas-content' !default;
   transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
   backface-visibility: hidden;
 
-  // Preserve transform none on overlap transition (override position based translate)
-  &.has-transition-overlap {
-    transform: none;
+  // Transform scope until the element is closed (makes sure transitionend gets triggered)
+  &.has-transition-push {
+    transform: translate(0, 0);
   }
 }