Transition is erroneously run when placed with bizarre sequence of sibling elements.

[AnalyzePlatypus]

Version

2.5.21

Reproduction link

https://jsfiddle.net/analyzeplatypus/eywraw8t/513878/

Steps to reproduce

The fiddle contains a seemingly random sequence of elements that illustrates the issue (described below).

1. Open the JSFiddle
2. Click the "Change" button
3. The transition plays (it should not).

Try removing any of the DOM elements and the errant transition no longer plays!

What is expected?

The transition should not run.
(CSS transition classes should not be applied, hooks should not be called, etc.)

What is actually happening?

The transition is run (CSS transition classes are applied).

---

I came across this while building a complex form with multiple buttons that appear/disappear based on form state.
I noticed duplicated buttons in one of my unit tests, and found that a transition was being run even though its child's v-if binding was not being changed. I duplicated the component and whittled it down until I arrived at the attached JSFiddle.

This issue appears when the following sequence of elements are aligned:

1. A boolean entry in the Vue component's data dictionary (hasChanges: false, in the JSFiddle)

The DOM contains
2. A <div> whose v-if is bound to the boolean entry (1).
2. A <transition> containing a button which modifies the boolean entry (1).
3. An empty <transition> element.
4. A <div> whose v-if is bound to the boolean entry (1) modified by logical NOT (!). (In the fiddle, v-if="!hasChanges").

With this exact structure, modifying the boolean entry (1) will run the transition - even though the transition is not bound to the boolean at all!

If you remove any of the above elements, or even reorder them (!) the errant transition will not run (which is the correct behavior).

Why does the transition run when placed with this particular set of siblings in this particular order?

[AnalyzePlatypus]

It also seems like the <button> in the fiddle is duplicated by the transition system (watch the DOM in your web inspector!) and simultaneously transitioned in and out: one <button> with -enter-active and one with -leave-active.

[posva]

Looks like a bug, as a workaround, wrapping one of the transitions with a simple container should do it

[aisagacious]

使用Vue开发混合APP Vue打包后报错Uncaught SyntaxError: Unexpected reserved word 到时安卓7.0——5.1之间的版本不能使用 求解决

[ayou33]

think i have the same issue:

<page>
  <component-a />
  <transition name="page-slide">
    <component :is="comp" />
  </transition>
  <component-b />
</page>

after the comp change and the transition done(after leave), the siblings compoents(component-a and component-b) will have a flash like rerender

[AnalyzePlatypus]

@beica1 , try wrapping your <transition> in a div.

[ayou33]

@AnalyzePlatypus Yes, Thank you!, it's worked for me.