Change q-layout-drawer animation properties
-
Hi, I want to change the layout drawer speed and timing, i try this but maybe is not the best:
.q-layout-animate, .q-layout-transition, .q-layout-drawer-left { transition: all 0.6s ease-in !important; background-color: green !important; }q-layout-drawer on v0.15 is slow on mobile, on v0.13 is fast
-
what kind of mobile device & browser are you using?
-
q-layout-drawer on v0.15 is slow on too many devices (example, galaxy note 5 and huawei phones), the performance is not good, i am usign cordova, quasar-play and directly on mobile browser
-
the next version of quasar will be released soon. it will have some speed improvements for the drawer…
-
Good, maybe the performance trouble is on QLayoutDrawer.js
-
I notice that render component (on q-layout-drawer):
that way is poor performance:
<q-collapsible group="gldl1" icon="explore" label="Otros"> <q-item to="/g1/item5" item inset-separator disabled> <q-item-side icon="mail" /> <q-item-main label="Ver Base" /> </q-item> <q-item to="/firststart" item inset-separator> <q-item-side icon="looks one" /> <q-item-main label="First Start" /> </q-item> </q-collapsible>that way is acceptable performance:
<div class="q-collapsible q-item-division relative-position"> <div class="q-collapsible-inner"> <div class="q-item q-item-division relative-position q-item-link"> <div class="q-item-side q-item-section q-item-side-left"><i aria-hidden="true" class="q-icon material-icons q-item-icon">explore</i></div> <div class="q-item-main q-item-section"> <div class="q-item-label" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;">Otros</div> </div> <div class="q-item-side q-item-section q-item-side-right"><i aria-hidden="true" class="q-icon cursor-pointer transition-generic relative-position material-icons q-item-icon">keyboard_arrow_down</i></div> </div> <div style="display: none;"> <div class="q-collapsible-sub-item relative-position"> <div class="q-item q-item-division relative-position q-item-inset-separator q-item-link" item="" disabled="disabled"> <div class="q-item-side q-item-section q-item-side-left"><i aria-hidden="true" class="q-icon material-icons q-item-icon">mail</i></div> <div class="q-item-main q-item-section"> <div class="q-item-label" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;">Ver Base</div> </div> </div> <div class="q-item q-item-division relative-position q-item-inset-separator q-item-link" item=""> <div class="q-item-side q-item-section q-item-side-left"><i aria-hidden="true" class="q-icon material-icons q-item-icon">looks_one</i></div> <div class="q-item-main q-item-section"> <div class="q-item-label" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;">First Start</div> </div> </div> </div> </div> </div> </div> -
Butter-smooth drawer in 0.15.7 already. Releasing in less than 24 hours.
-
On 0.15.7~10 is better, thanks, but dragging the drawer (with mobile touch) continues to be slow, on quasar 0.13 is too fast and butter-smooth
-
Dragging with mobile touch was exactly what got enhanced. Tested on a low end device. It’s butter smooth now…
-
Yes, when you touch a button for open or close (or touch gray area) the q-drawer is fast on quasar 0.15.7+, but when you make a swipe action from left (to open) or right (to close) is slow. I’m using 7 q-collapsible elements on q-drawer.
