How to make multiple different Vue transtition?

Question

I'm trying to make this animation between "work" and "bio" section as you can see on this web: https://alitwotimes.com/

I watched multiple videos about <transition> in Vue but the transition is working just from right to left and left to right depends on what section I'm clicking on.
How can I make the show2 work?

<template>
<div>
   <transition name="show">
      <router-view />
  </transition>
</div>
</temlate>

<style>
.show-enter-from{
  opacity: 0;
  transform: translateX(100px)
}
.show-enter-active{
  transition: all 0.6s ease-out;
}
.show-leave-to{
  opacity: 0;
  transform: translateX(-300px)
}
.show-leave-active{
  transition: all 0.6s ease-in;
}
.show2-enter-from{
  opacity: 0;
  transform: translateX(-100px)
}
.show2-enter-active{
  transition: all 0.6s ease-out;
}
.show2-leave-to{
  opacity: 0;
  transform: translateX(300px)
}
.show2-leave-active{
  transition: all 0.6s ease-in;
}
</style>
```