transition appear has different behavier between 2.x and 3.x

[yoyoys]

Version

3.0.0-rc.4

Reproduction link

https://github.com/yoyoys/vue-next-transition-bug

Steps to reproduce

2.x repo:
https://github.com/yoyoys/vue-transition-sample

1. click button to toggle visible
2. transition will apply on div and component

with appear option, the transition will keep leave animation, but 3.x missing this feature.

What is expected?

both div and component got same transition

What is actually happening?

the component's leave animation gone.

[posva]

Please, don't create the issue before creating the reproduction. Only open the issue once you have a reproduction ready and published

[yoyoys]

@posva sorry i've missing 2.x code, i'd pushed.
here is gif version

2.x

3.x

[yoyoys]

@posva do i need to submit a new issue?

[posva]

if you open an issue provide a reproduction. This issue's reproduction points to a 404

[pikax]

Make sure the repo is not private!

[yoyoys]

@posva @pikax I've just make repo public right now, thanks.

[posva]

@yoyoys see vuejs/rfcs#105

[pikax]

make sure you also read the new docs:
https://v3.vuejs.org/api/built-in-components.html#transition
https://v3.vuejs.org/guide/transitions-overview.html#class-based-animations-transitions

[yoyoys]

make sure you also read the new docs:
https://v3.vuejs.org/api/built-in-components.html#transition
https://v3.vuejs.org/guide/transitions-overview.html#class-based-animations-transitions

@yoyoys see vuejs/rfcs#105
Thanks.
I've noticed that I can't use transition at component root right now.

May I ask a question here?
If I'd like to apply transition with teleport together (at target component),
how can I do this on vue 3? (I did it with vue-portal and component root transition at 2.x)

[nVitius]

I hate to comment on an older issue, especially one that is already closed. I came across this issue when searching for "vue teleport with transition". I didn't find many results or answers; I wanted to leave my solution here in case anyone else came across this.

For my use-case, I wanted to show an alert to the user that would be triggered by the parent and would hide itself after a set timeout.

<template>
  <teleport to="#alerts">
    <transition name="fade">
      <div v-if="shouldDisplay" class="alert">{{ props.message }}</div>
    </transition>
  </teleport>
</template>

<script lang="ts" setup>
  import { defineExpose, defineProps, ref, withDefaults } from 'vue';

  const props = withDefaults(
    defineProps<{
      message: string;
      timeout?: number;
    }>(),
    {
      timeout: () => 3000
    }
  );

  const shouldDisplay = ref(false);
  let timer: null | number = null;
  const show = () => {
    shouldDisplay.value = true;

    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => (shouldDisplay.value = false), props.timeout);
  };

  const hide = () => {
    shouldDisplay.value = false;

    if (timer) {
      clearTimeout(timer);
    }
  };

  defineExpose({ show, hide });
</script>

The important piece here was using the <transition> component inside of the <teleport>. Doing it on the parent, or by wrapping <teleport> does not work. I also tried using a <transition-group tag="div"> as the target for the teleport, but Vue didn't like that either.

It seems pretty obvious now that it is set up, but I had some trouble getting it to work initially.