André Figueira

Systems engineer - I write apps, I make websites, opinions are my own...

How to animate vue-form-wizard tab transitions

If you're using BinarCode/vue-form-wizard you may want to animate the tabs, there is a quick and easy way to do this using CSS check it out:

Firstly define an animation in your CSS.

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Then simply use the animation property to define fadein as the animation on the vue-wizard-container class.


.wizard-tab-content {
    padding: 0!important;
    .wizard-tab-container {
        animation: fadein 0.4s;
    }
}

Hope this helps you out.