Vue – apply transition to menu element

I have this scss code in my vue app. I’m trying to make a smooth transition from left for a menu when the isVisible property is set to true but I’m not able to apply the transition I’ve defined and the menu will instantly appear. I’ve done a reserach here on SO and I’ve found some interesting questions but all of them are using jQuery and css animation so they are not really useful. I’m not a CSS master, any suggestion about?

HTML

    <div class="col-12 settings p-3 position-fixed" :class="{ 'show': isVisible }" ref="settings" v-if="isVisible">
      <h4>Settings</h4>
    </div>

CSS

.settings {
  top: 0;
  width: 50%;
  height: 100vh;
  background-color: white;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  &.show {
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
}

Answer

This is done with <transition>

Here an example:

 <transition name="slide">
    <div class="col-12 settings p-3 position-fixed" class="settings" v-if="isVisible">
         <h4>Settings</h4>
    </div>
 </transition>

CSS class

.slide-enter-active, .slide-leave-active {
  transition: transform .5s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-200px);
}
.settings {
  top: 0;
  width: 50%;
  height: 100vh;
  background-color: white;
}

Its really not that hard

Take a look: https://v2.vuejs.org/v2/guide/transitions.html