DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Slide effect on VueJS
Ariel Mejia
Ariel Mejia

Posted on

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>
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:

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

Collapse
 
penandpapers profile image
PenAndPapers

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

Collapse
 
arielmejiadev profile image
Ariel Mejia Author

Thanks for reading! hope this is helpful

πŸ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.