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>


  • Admin

    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


  • Admin

    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.