Slide effect on VueJS

Classes

VueJS provide some classes by default to apply css styles on any of this classes, every class represents a phase to show the elements, think this classes as hooks for templates tags, this are:

• v-enter-active
• v-leave-active
• v-enter
• v-enter-to
• v-leave-to

Here a snippet that you can use on to make this common responsive menus from the right or left:

<transition name="show">
    <div>
        <p>Menu item</p>
        <p>Menu item</p>
    </div>
</transition>

Then on the styles tag of the component or a dedicated stylesheet, you can change the "v" prefix on vuejs transitions classes by the css class name:

<style>
.show-enter-active,
.show-leave-enter {
    transform: translateX(0);
    transition: all .3s linear;
}
.show-enter,
.show-leave-to {
    transform: translateX(100%);
}
</style>

You can apply any css transition like fadeIn effects, this is a very helpful feature of VueJS.

Thanks for reading.

Comments

[PenAndPapers]

This is great! Something that I can use in my personal project. Thanks!

[Ariel Mejia]

Thanks for reading! hope this is helpful