Animation in Vue Stepper component

11 Jun 20244 minutes to read

The Stepper progress state can be animated, smoothly transitioning from one step to another. You can customize the animation’s duration and delay by using the animation property.

You can disable the animation by setting the enable property to false. By default, the value is true.

Fields Type Description
duration number Specifies the duration of the animated transition for each step. The default value is 2000 milliseconds.
delay number Specifies the delay to initiate the animated transition for each step in milliseconds. The default value is 0.

The example demonstrates the animation duration and delay settings for the Stepper.

<template>
  <div class="animation-container">
    <ejs-stepper id="stepper" :animation="animation">
      <e-steps>
        <e-step title="1"></e-step>
        <e-step title="2"></e-step>
        <e-step title="3"></e-step>
        <e-step title="4"></e-step>
      </e-steps>
    </ejs-stepper>
  </div>
</template>
<script setup>

import { StepperComponent as EjsStepper, StepsDirective as ESteps, StepDirective as EStep } from "@syncfusion/ej2-vue-navigations";

const animation = { enable: true, delay: '500', duration: '2000' };

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";

.animation-container {
  margin-top: 30px;
  padding: 30px;
}
</style>
<template>
    <div class="animation-container">
        <ejs-stepper id="stepper" :animation="animation">
            <e-steps>
                <e-step title="1"></e-step>
                <e-step title="2"></e-step>
                <e-step title="3"></e-step>
                <e-step title="4"></e-step>
            </e-steps>
        </ejs-stepper>
    </div>
</template>
<script>

import { StepperComponent, StepsDirective, StepDirective } from "@syncfusion/ej2-vue-navigations";

export default {
    name: "App",
    components: {
        'ejs-stepper': StepperComponent,
        "e-steps": StepsDirective,
        "e-step": StepDirective
    },
    data() {
        return {
            animation: { enable: true, delay: '500', duration: '2000' }
        };
    }
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";

.animation-container {
    margin-top: 30px;
    padding: 30px;
}
</style>