Vertical stepper's animation

StarDustEins commented 1 week ago

Description

Vertical stepper's animation seems not good, in Quasor's official demo it works smoothly. I use the latest version of Nicegui 2.3.0

https://github.com/user-attachments/assets/7600407d-e6a0-4cd2-bdf6-8218c39a1dc3

falkoschindler commented 1 week ago

Thanks for reporting this issue, @StarDustEins!

Minimum reproducible example:

with ui.stepper().props('vertical animated') as stepper:
    with ui.step('A'):
        with ui.stepper_navigation():
            ui.button('Next', on_click=stepper.next)
    with ui.step('B'):
        with ui.stepper_navigation():
            ui.button('Next', on_click=stepper.next)
            ui.button('Back', on_click=stepper.previous)
    with ui.step('C'):
        with ui.stepper_navigation():
            ui.button('Back', on_click=stepper.previous)

falkoschindler commented 1 week ago

So far I failed to reproduce it with plain Quasar/Vue:

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400|Material+Icons" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="q-app">
      <q-stepper ref="stepper" :model-value="step" @update:model-value="onStepChange" vertical animated>
        <q-step :name="1" title="Step 1">
          <q-stepper-navigation>
            <q-btn @click="next" label="Next"></q-btn>
          </q-stepper-navigation>
        </q-step>
        <q-step :name="2" title="Step 2">
          <q-stepper-navigation>
            <q-btn @click="next" label="Next"></q-btn>
            <q-btn @click="previous" label="Previous"></q-btn>
          </q-stepper-navigation>
        </q-step>
        <q-step :name="3" title="Step 3">
          <q-stepper-navigation>
            <q-btn @click="previous" label="Previous"></q-btn>
          </q-stepper-navigation>
        </q-step>
      </q-stepper>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.umd.prod.js"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          const step = Vue.ref(1);
          const stepper = Vue.ref(null);
          return {
            step,
            stepper,
            onStepChange: (newStep) => (step.value = newStep),
            next: () => stepper.value.next(),
            previous: () => stepper.value.previous(),
          };
        },
      });
      app.use(Quasar);
      app.mount("#q-app");
    </script>
  </body>
</html>

This animates as expected. But what's the difference to a NiceGUI app? Does anyone have an idea?

StarDustEins commented 5 days ago

I have no idea about Vue and js

CrystalWindSnake commented 2 days ago

@falkoschindler I suspect the reason for the issue is that the stepper rebuilds all its child elements every time it updates

zauberzeug / nicegui

Vertical stepper's animation #3881

Description