onEnter of transition component is fired when its child is set to v-show="false"

[07akioni]

Version

3.2.20

Reproduction link

SFC Playground

Steps to reproduce

See the link

What is expected?

onEnter is not fired since v-show=false

What is actually happening?

onEnter is fired

[ygj6]

Please refer to: https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show

[posva]

This behavior seems inconsistent with v-if, which can be used as a temporary workaround

[Bigfish8]

Maybe it is not a bug?
persisted is designed for this condition.
You should set persisted to true.

[07akioni]

persisted

I can't understand what it behaves by reading the docs. I just want it have the same behavior on hooks like v-if.

[Bigfish8]

It is Intentional?
Just in my option,v-show means element actually render.It seems reasonable if it trigger the enter hooks.

[07akioni]

It is Intentional? Just in my option,v-show means element actually render.It seems reasonable if it trigger the enter hooks.

I don't think so. Enter is transition's enter, not the child element's enter.

[mehanalavimajd]

@07akioni , I think you should delete the appear attribute from the transition because according to docs :

If you also want to apply a transition on the initial render of a node, you can add the appear

The element has rendered because v-show will just add an display:none to element and when you add the appear , the onEnter method will be fired.
So you can do 2 things to solve this problem :

1. delete appear attribute
2. change v-if to v-show (preferred way)

[07akioni]

@07akioni , I think you should delete the appear attribute from the transition because according to docs :

If you also want to apply a transition on the initial render of a node, you can add the appear

The element has rendered because v-show will just add an display:none to element and when you add the appear , the onEnter method will be fired. So you can do 2 things to solve this problem :

1. delete appear attribute
2. change v-if to v-show (preferred way)

I want the animation play on its first mount.

[mehanalavimajd]

I want the animation play on its first mount.

your description is really incomplete . if you want that animation play on its first mount , so what is the bug?

[07akioni]

I want the animation play on its first mount.

your description is really incomplete . if you want that animation play on its first mount , so what is the bug?

When default v-show is set to true, everything works fine.

The main problem is when the default v-show is set to false, the animation done (onEnter) hook is still called.

This is inconsistent between v-show and v-if. I expect all the hooks should be fired in the same manner. There's no document clearly regulates the behavior.