Vue.js Transition See Up

In this article i will share my concept How To Make Drawer with Animation From Left to Right using vuejs transition Component

1. Create Drawer Component named Drawer.vue in components folder and then paste the code bellow.

<template>
  <transition name="slide">
    <div class="drawer" v-if="open">
      <ul>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">Home</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">About</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Portfolio</a
          >
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Contact</a
          >
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
export default {
  name: "drawer",
  props: ["open"],
  created() {
    console.log("props: ", this.open);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.drawer {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(228, 70, 70, 0.7);
  z-index: 2;
  overflow-y: hidden;
  padding: 1em;
}

.drawer ul li {
  margin: 0;
  list-style: none;
  text-align: center;
  margin: 1em;
}

.drawer ul li a {
  text-decoration: none;
  color: white;
}

.slide-enter-active {
  transition: all 0.7s ease;
  transform: translateX(-90%);
  opacity: 1;
}

.slide-enter-to {
  transition: all 0.7s ease;
  transform: translateX(0%);
}

.slide-leave-active {
  transition: all 0.7s ease;
  transform: translateX(-30%);
  opacity: 0;
}
</style>

2. In App.vue component import the Drawer.vue component and use it.Also create a button that will toggle the drawer component.See the codes beloew in App.vue

<template>
  <div class="main">
    <Drawer :open="open" />

    <button @click="open = !open">Toggle Drawer</button>
  </div>
</template>

<script>
import Drawer from "./components/Drawer";
export default {
  name: "App",
  data: function () {
    return {
      open: true,
    };
  },
  components: {
    Drawer,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

button {
  background: crimson;
  color: white;
  padding: 1em;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>

And that's it. You have made an awsome Drawer component with vuejs and vuejs built in transition component 🚀

You will find the whole project below 👇

See in code sandbox

Thank You 😊