I'm doing mobile first development. I have a menu with items on it. I click on the menu item and it takes me to a whole new screen, using a new layout file. That layout file has a back button on it. I have it set up to go back one page. That all works.

video of transitions not working: https://streamable.com/gnsjx

I am expecting it to slide back and forth between the pages

I'm trying to add a transition between this page and its parent page. I can't get it working at the moment with this setup:

HTML:

<template>
  <nav>
    <transition name="slide">
      <div @click="goBack()" class="go-back-a-page">
        <i class="fa fa-2x fa-angle-left"></i>
      </div>
    </transition>
  </nav>
</template>

JS:

export default {
  transition: 'slide',
  ...
}

CSS:

.slide-leave-active,
.slide-enter-active {
  transition: 0.5s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

When I click back, it just immediately flicks back. No transition. Can anyone advise on where I'm going wrong?