From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 8 Feb 2019 16:08:40 +0000 (+0200)
Subject: Offcanvas example: transition the transform (#28203)
X-Git-Tag: v4.3.0~13
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=c56b10c14756222c4921c790703348eb8239bc95;p=thirdparty%2Fbootstrap.git

Offcanvas example: transition the transform (#28203)

This is more efficient than transitioning the `left` property.
---

diff --git a/site/docs/4.2/examples/offcanvas/offcanvas.css b/site/docs/4.2/examples/offcanvas/offcanvas.css
index 22de95a411..9c78f02e5e 100644
--- a/site/docs/4.2/examples/offcanvas/offcanvas.css
+++ b/site/docs/4.2/examples/offcanvas/offcanvas.css
@@ -19,13 +19,14 @@ body {
     overflow-y: auto;
     visibility: hidden;
     background-color: #343a40;
-    transition-timing-function: ease-in-out;
-    transition-duration: .3s;
-    transition-property: left, visibility;
+    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
+    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
+    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
   }
   .offcanvas-collapse.open {
-    left: 0;
     visibility: visible;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
   }
 }