vue transition slide-fade css

Question

What I want to do is: When the button is clicked with vue js, "Shopping cart" is opened in modal style with teleport, but I couldn't figure out how to write "transition" css.

<Teleport to="body">
    <ShopCart :show="showCart" @close="showCart = false"/>
</Teleport>

<transition name="slide-fade" mode="in-out">
    <div v-show="show" class="fixed inset-0 flex items-center justify-end z-50 ">
      <div class="flex h-full flex-col bg-white shadow-xl overflow-hidden"></div>
    </div>
</transition>

.slide-fade-enter-active {
  transition: all 0.3s;
}

.slide-fade-leave-active {
  transition: all 0.3s;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100px);
//opacity: 0;
}