Subscribe on changes!

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

avatar
Oct 24th 2021

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

avatar
Oct 25th 2021

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

avatar
Oct 26th 2021

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

avatar
Oct 26th 2021

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.

avatar
Oct 28th 2021

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

avatar
Oct 28th 2021

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.

avatar
Nov 2nd 2021

@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)
avatar
Nov 2nd 2021

@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.

avatar
Nov 2nd 2021

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?

avatar
Nov 2nd 2021

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.