Different transitions for enter and leave

[GerdonAbbink]

Question

Hi, first of all, thanks for this great library! I have a question regarding transitions. Is it possible to have different transitions for enter and leave?

For example, I’d like to use a scale transition for enter and a slide transition for leave. I couldn't find a way to configure this in the documentation. If this isn't currently possible, would it be feasible to add support for it in the future? Or is there a recommended workaround?

Example Use Case:

Enter: Element scales up Leave: Element slides out

Would love to hear your thoughts on this. Thanks in advance!

[MorevM]

Good day @GerdonAbbink, Thanks for the kind word :)

Unfortunately, there's no such built-in feature here.

---

As a workaround, you can use something like this:

<template>
  <div>
    <component
      :is="transitionComponent"
      @after-leave="toggleTransitionComponent"
      @after-enter="toggleTransitionComponent"
    >
      <div class="box" v-if="isVisible"></div>
    </component>

    <button type="button" @click="() => (isVisible = !isVisible)">
      Toggle
    </button>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from "vue";
  import { TransitionExpand, TransitionScale } from "@morev/vue-transitions/vue3";

  const isVisible = ref(true);

  const transitionComponentType = ref('expand');
  const transitionComponent = computed(() =>
    transitionComponentType.value === 'expand' ? TransitionExpand : TransitionScale);
  const toggleTransitionComponent = () => {
    transitionComponentType.value = transitionComponentType.value === 'expand'
      ? 'scale'
      : 'expand';
  }
</script>

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>

This works, I checked locally (unfortunately couldn't do it online, something is wrong there with those web containers on stackblitz and similar sites).

Theoretically it's not particularly difficult to design this as a separate generic component and even provide it directly from the library, but I don't think I'm ready to do it myself - I have slightly different interests at the moment.

If you are ready to implement this functionality as a PR - we can discuss its design in detail; otherwise I recommend you to create your own custom-transition component and, following my example above, implement the required functionality. I think the most difficult thing will be to implement proper type resolving if you use TS.

I'll leave this issue open - it's not a bad idea, and while I don't plan to do it now, maybe someone else can do it, or something will change in the future. Feel free to ask clarifying questions :)