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?

Uh oh!

Vertical stepper's animation #3881

Description

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions