fix&perf(QDrawer): Safari doesn't render correctly the ease-in animat…

…ion #4611
quasarframework · Jul 10, 2019 · 2767441 · 2767441
1 parent 6886d62
commit 2767441
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 10 deletions.
diff --git a/ui/src/components/layout/QDrawer.js b/ui/src/components/layout/QDrawer.js
@@ -534,7 +534,7 @@ export default Vue.extend({
 
       this.mobileView === true ? h('div', {
         ref: 'backdrop',
-        staticClass: 'fullscreen q-drawer__backdrop q-layout__section--animate',
+        staticClass: 'fullscreen q-drawer__backdrop',
         class: this.backdropClass,
         style: this.lastBackdropBg !== void 0
           ? { backgroundColor: this.lastBackdropBg }
@@ -565,7 +565,7 @@ export default Vue.extend({
     }, child.concat([
       h('aside', {
         ref: 'content',
-        staticClass: `q-drawer q-layout__section--animate`,
+        staticClass: `q-drawer`,
         class: this.classes,
         style: this.style,
         on: this.onNativeEvents,

diff --git a/ui/src/components/layout/QFooter.js b/ui/src/components/layout/QFooter.js
@@ -141,7 +141,7 @@ export default Vue.extend({
     )
 
     return h('footer', {
-      staticClass: 'q-footer q-layout__section--marginal q-layout__section--animate',
+      staticClass: 'q-footer q-layout__section--marginal',
       class: this.classes,
       style: this.style,
       on: {

diff --git a/ui/src/components/layout/QHeader.js b/ui/src/components/layout/QHeader.js
@@ -130,7 +130,7 @@ export default Vue.extend({
     )
 
     return h('header', {
-      staticClass: 'q-header q-layout__section--marginal q-layout__section--animate',
+      staticClass: 'q-header q-layout__section--marginal',
       class: this.classes,
       style: this.style,
       on: {

diff --git a/ui/src/components/layout/QPageContainer.js b/ui/src/components/layout/QPageContainer.js
@@ -40,7 +40,7 @@ export default Vue.extend({
 
   render (h) {
     return h('div', {
-      staticClass: 'q-page-container q-layout__section--animate',
+      staticClass: 'q-page-container',
       style: this.style,
       on: this.$listeners
     }, slot(this, 'default'))

diff --git a/ui/src/components/layout/QPageSticky.js b/ui/src/components/layout/QPageSticky.js
@@ -118,7 +118,7 @@ export default Vue.extend({
     const content = slot(this, 'default')
 
     return h('div', {
-      staticClass: 'q-page-sticky q-layout__section--animate row flex-center',
+      staticClass: 'q-page-sticky row flex-center',
       class: this.classes,
       style: this.style
     },

diff --git a/ui/src/components/layout/layout.styl b/ui/src/components/layout/layout.styl
@@ -1,5 +1,3 @@
-$layout-transition = all .12s ease-in
-
 .q-layout
   width 100%
 
@@ -145,8 +143,18 @@ body.q-ios-padding
     padding-bottom env(safe-area-inset-bottom)
     min-height "calc(env(safe-area-inset-bottom) + %s)" % $toolbar-min-height
 
-.q-body--layout-animate .q-layout__section--animate
-  transition $layout-transition !important
+.q-body--layout-animate
+  .q-drawer__backdrop
+    transition background-color .12s !important
+  .q-drawer
+    transition transform .12s, width .12s, top .12s, bottom .12s !important
+  .q-layout__section--marginal
+    transition transform .12s, left .12s, right .12s !important
+  .q-page-container
+    transition padding-top .12s, padding-right .12s, padding-bottom .12s, padding-left .12s !important
+  .q-page-sticky
+    transition transform .12s, left .12s, right .12s, top .12s, bottom .12s !important
+
 .q-body--drawer-toggle
   overflow-x hidden !important