DEV Community

Cover image for Slide effect on VueJS
Ariel Mejia
Ariel Mejia

Posted on

Slide effect on VueJS


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">
        <p>Menu item</p>
        <p>Menu item</p>
Enter fullscreen mode Exit fullscreen mode

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:

.show-leave-enter {
    transform: translateX(0);
    transition: all .3s linear;
.show-leave-to {
    transform: translateX(100%);
Enter fullscreen mode Exit fullscreen mode

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

Thanks for reading.

Top comments (2)

penandpapers profile image

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

arielmejiadev profile image
Ariel Mejia

Thanks for reading! hope this is helpful