How to create slide transition in VueJS

Posted on: December 25, 2021 by Deven

In this article, you are going to learn about how to create slide transitions in VueJS.

VueJS is an open-source JavaScript front-end framework. You can do many interesting things by using VueJS. Creating a slide transition is one of them. It will help you to make your web app more interactive and user-friendly. Let’s see the below example of how you can create a slide transition by using VueJS.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
 
  <title>Slide Transition In VueJS</title>
</head>
<body>
  
  <div id="app">
    <button v-on:click="visible = !visible">
      Click Me
    </button>
    <transition name="fade">
      <p v-if="visible">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat debitis sit optio, sequi reprehenderit ipsam libero incidunt inventore fuga tenetur?</p>
    </transition>
  </div>
  
 <script src="<https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js>"></script>
 <script src="app.js"></script>  
  
</body>
</html>

Here, we add VueJS from CDN and write the HTML code for a simple transition. We also linked out JS file and CSS file.

VueJS:

new Vue({
  el: '#app',
  data: {
    visible: true
  }
})

Here, we simply add the logic for showing the data when the button was clicked.

CSS:

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

Here, the transition will happen and the CSS code that we are applying into the classes. Those classes are accessible because VueJS provides those and we can use them for creating beautiful transitions into our web page.

Output:

The moment you click the click me button the text will be visible in front of you but not immediately. The data will be visible slowly with a beautiful transition.You may add many different transitions in your web app based on your own project scope. There are tons of transitions that you can use in VueJS. Here we used faded transition. But the process of adding transitions is almost the same. So all you need to do is to take this article as a quick kick-start for using transitions and try to implement more of them from the official VueJS documentation.

How to create slide transition in VueJS

Related Posts:

category :

tag :

Share on social media