Wrapping around transition component throws when transition is toggled before it has completed previously #3716

A-Babin · 2021-05-01T21:38:54Z

Version

3.0.11

Reproduction link

link

Steps to reproduce

Toggle the check box to start the transition, then toggle it again before it has completed.

Try replacing the custom-transition component with the standard transition

What is expected?

Should be able to toggle a transition as quickly as I like.

What is actually happening?

A warning and two errors are thrown. Any further attempts to
toggle the transition at all produces the same errors.

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="fade-inout" class="fade-inout" > 
  at <CustomTransition name="fade-inout" > 
  at <App>

Uncaught TypeError: Cannot read property '0' of undefined
    at Object.on_console (index.969554ad.js:1)
    at pw.handle_repl_message (index.969554ad.js:1)
    at handle_event (index.969554ad.js:1)

 Uncaught (in promise) TypeError: Cannot read property '_leaveCb' of null
    at Object.beforeEnter (vue.runtime.esm-browser.js:3490)
    at mountElement (vue.runtime.esm-browser.js:5938)
    at processElement (vue.runtime.esm-browser.js:5882)
    at patch (vue.runtime.esm-browser.js:5802)
    at componentEffect (vue.runtime.esm-browser.js:6369)
    at reactiveEffect (vue.runtime.esm-browser.js:342)
    at callWithErrorHandling (vue.runtime.esm-browser.js:1335)
    at flushJobs (vue.runtime.esm-browser.js:1561)

The text was updated successfully, but these errors were encountered:

A-Babin · 2021-05-01T21:56:46Z

It has something to do with specifying classes on the transition component. If I only add the class for my transition onto the elements inside the transition, everything works okay. But if I then also set any class on the transition component, even one that doesn't exist, by binding or attribute, the same errors occur.

edison1105 · 2021-05-02T01:54:53Z

Custom classes are not controlled by Transition, Not just class binding any other property will result in the same error. e.g: style="color:#000"

Change the code as below, it will works fine.

<transition v-bind="$props">
    <slot></slot>
</transition>

and

  .fade-inout {
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease-out;
  }
  
-  // 
  .fade-inout-enter-active, .fade-inout-leave-active {
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease-out;
  }
  
  .fade-inout-enter-from, .fade-inout-leave-to {
    opacity: 0;
  }

A-Babin · 2021-05-02T02:18:42Z

Change the code as below, it will works fine

Apparently not in Chrome 89, Edge 90, or Safari 14. Using enter-active, leave-active, if the transition switches state while it's already mid-transition, it will jump to the start of the next transition, instead of continuing from where it was when the transition state was changed.

I see that it works in Firefox though, but setting classes on the transition component and toggling the transition too quickly still throws.

In both, it works totally fine and as expected (the class binding is passed to the target of the transition) if you let the transition finish before setting it off again.

posva · 2021-05-03T12:48:50Z

As @edison1105 said, you need to pass the class to the element, not the transition. Maybe the problem comes from somewhere else.

it will jump to the start of the next transition, instead of continuing from where it was when the transition state was changed.

That is expected and the from classes are set when entering/leaving to set the beginning of the transition

A-Babin · 2021-05-03T17:34:25Z

you need to pass the class to the element, not the transition.

@posva Yeah, that's exactly what I was trying to avoid having to do in the first place. If I want a reusable set of enter/leave transition components and don't want them to be ugly in Chrome, Edge, and Safari if they change state too quickly, I'd have to add a class corresponding to the transition to everything I apply it to? What do I do when I want to transition a slot and don't want the user of my component to have to think about adding transition classes on their end?

That is expected and the from classes are set when entering/leaving to set the beginning of the transition

Right... until I saw that Firefox displays the transitions the way I want them to work, I assumed the way they work in Chrome was correct. That's why I was trying work around it by not using the enter/leave-active classes and having the CSS transition applied through the lifetime of the element so you never see it jump to the from states. Since transition does pass the class binding and attribute to it's target element, I assumed I could just make a wrapper around transition that adds a class with the name of the transition, and I put the CSS transition property on it instead the enter/leave-active classes. It almost works, except that it throws if the transition is toggled while it's already in the middle of transitioning.

If I'm not supposed to do that at all, and I really don't want to require explicitly setting the transition class on the elements/components themselves in addition to wrapping them in Transitions, and I'm not going to be satisfied breaking the best quality of CSS transitions (continuity), I suppose I'll have to find some other way to get what I am looking for. If I can use the Javascript hooks, it shouldn't be too difficult, I suppose.

lidlanca · 2021-05-04T21:31:58Z

@A-Babin
maybe changing v-if with v-show
will get you where you want to get.

I am not sure what breaks the logic with v-if and transition, but v-show behaves better.

HcySunYang · 2021-05-06T06:18:24Z

Bind the class(or other non-props binding) to the transition component, which will perform the attribute fallthrough:
https://github.com/vuejs/vue-next/blob/293b41ba3be095452f9648b0b35dfd9022a3621e/packages/runtime-core/src/componentRenderUtils.ts#L144

This resulted in cloning the original VNode and rendering it, but the leavingVNodesCache always stores the original VNode, not the cloned one:

https://github.com/vuejs/vue-next/blob/293b41ba3be095452f9648b0b35dfd9022a3621e/packages/runtime-core/src/components/BaseTransition.ts#L407

After mounting, the cloned VNode has the vnode.el property, but the original VNode does not. I cannot give a better solution for now...

unshame · 2023-08-11T15:14:40Z

Just spent 4 hours trying to debug this problem, and only then found this issue. Passing non-prop attributes to a component that has another component as its root that has Transition as its root causes a crash when enter transition is triggered while the leave transition is ongoing.

Here's a minimal reproduction: https://play.vuejs.org/#eNqFVEFu2zAQ/AqhSxwgll0EvbiO0TZNgfTQBrWPujDSymZCkQK5UhwY+nuXlCkqTpOcbO7OjpczQx+Sb3Wdtg0ki2RpcyNqZBawqZnkanuVJWizZJUpUdXaILvWVc1Koyt2ls7cQStQ6ObPMrWc9QQEpwNCVUuOQCfGln5wRt+Xs1EjuSD+XKtSbNMHqxUtcXDwLMkJLySYPzUKrWiHBfMd1+NS6qdfvoamgYtQz3eQP/6n/mD3rpYldwYsmBayZOghN1vAvn2z/g17+j40K100ktDvNP+C1bJxO/aw740qaO0Rzm976+UTaruxN3sEZcOl3KIO2Xl8lpCSTqq3rh7XvUwv/VymOlJxYzhxOvxPXkDwMyptvAkRxRSvgNwtCe389X1CWKnR2dTjZ3HAl8be0dGXLD7L/pg6sinFAcyU5yhacmAoS+AtHMt0Hc+PA/uC6ZrnAp/ZPP1sGXALXxymCz8z5nbxe8WMOrAemRZsHikomcOapNaL4I6CP4p8/wj8wDH6B2agZN0x/T7xsfnD6LrQT2p4G6HQP43jLSjplp7XzgGvHN3E2X8e2mWjSB8ypwTMd+tmuwXrI3Dr7q24nJyHS3qOtOWyAWIqubQQWKgJuBEV6AYnNHG1CkOnYz57vtNdsE/zuV8k6HV8ycHm0ygVoo2puW8Qae2vuRT5o0vVG/tT0q4dhFWwnPVDkWSQcOG3JBr/SVYUHPlUTHPeWIrQNDfc7kYhDaucpJN8Hpvw/v9bdDJGfo2cVg2Gvn5hg60FlELBHf2YXY79WbB7rSmeHtStJl7fj6U92SAqRBdl7VSUUZrVhhSOCrx8snH6VJnuH9D2FKU=

Removing the data-i-cause-a-crash in Component.vue fixes the issue. Setting inheritAttrs: false in Dropdown.vue and adding explicit v-bind="$attrs" to the div inside the TransitionFade component also fixes it.

…ode (#10809) close #3716 close #10497 close #4091

## [3.4.27](vuejs/core@v3.4.26...v3.4.27) (2024-05-06) ### Bug Fixes * **compat:** include legacy scoped slots ([#10868](vuejs/core#10868)) ([8366126](vuejs/core@8366126)), closes [#8869](vuejs/core#8869) * **compiler-core:** add support for arrow aysnc function with unbracketed ([#5789](vuejs/core#5789)) ([ca7d421](vuejs/core@ca7d421)), closes [#5788](vuejs/core#5788) * **compiler-dom:** restrict createStaticVNode usage with option elements ([#10846](vuejs/core#10846)) ([0e3d617](vuejs/core@0e3d617)), closes [#6568](vuejs/core#6568) [#7434](vuejs/core#7434) * **compiler-sfc:** handle keyof operator ([#10874](vuejs/core#10874)) ([10d34a5](vuejs/core@10d34a5)), closes [#10871](vuejs/core#10871) * **hydration:** handle edge case of style mismatch without style attribute ([f2c1412](vuejs/core@f2c1412)), closes [#10786](vuejs/core#10786) ## [3.4.26](vuejs/core@v3.4.25...v3.4.26) (2024-04-29) ### Bug Fixes * **compiler-core:** fix bail constant for globals ([fefce06](vuejs/core@fefce06)) * **compiler-core:** remove unnecessary constant bail check ([09b4df8](vuejs/core@09b4df8)), closes [#10807](vuejs/core#10807) * **runtime-core:** attrs should be readonly in functional components ([#10767](vuejs/core#10767)) ([e8fd644](vuejs/core@e8fd644)) * **runtime-core:** ensure slot compiler marker writable ([#10825](vuejs/core#10825)) ([9c2de62](vuejs/core@9c2de62)), closes [#10818](vuejs/core#10818) * **runtime-core:** properly handle inherit transition during clone VNode ([#10809](vuejs/core#10809)) ([638a79f](vuejs/core@638a79f)), closes [#3716](vuejs/core#3716) [#10497](vuejs/core#10497) [#4091](vuejs/core#4091) * **Transition:** re-fix [#10620](vuejs/core#10620) ([#10832](vuejs/core#10832)) ([accf839](vuejs/core@accf839)), closes [#10632](vuejs/core#10632) [#10827](vuejs/core#10827) ## [3.4.25](vuejs/core@v3.4.24...v3.4.25) (2024-04-24) ### Bug Fixes * **defineModel:** align prod mode runtime type generation with defineProps ([4253a57](vuejs/core@4253a57)), closes [#10769](vuejs/core#10769) * **runtime-core:** properly get keepAlive child ([#10772](vuejs/core#10772)) ([3724693](vuejs/core@3724693)), closes [#10771](vuejs/core#10771) * **runtime-core:** use normal object as internal prototype for attrs and slots ([064e82f](vuejs/core@064e82f)), closes [/github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add#r141304923](https://github.com//github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add/issues/r141304923) ## [3.4.24](vuejs/core@v3.4.23...v3.4.24) (2024-04-22) ### Bug Fixes * **compiler-core:** handle template ref bound via v-bind object on v-for ([#10706](vuejs/core#10706)) ([da7adef](vuejs/core@da7adef)), closes [#10696](vuejs/core#10696) * **compiler-core:** properly parse await expressions in edge cases ([b92c25f](vuejs/core@b92c25f)), closes [#10754](vuejs/core#10754) * **compiler-sfc:** handle readonly operator and ReadonlyArray/Map/Set types ([5cef52a](vuejs/core@5cef52a)), closes [#10726](vuejs/core#10726) * **compiler-ssr:** fix hydration mismatch for conditional slot in transition ([f12c81e](vuejs/core@f12c81e)), closes [#10743](vuejs/core#10743) * **compiler-ssr:** fix v-html SSR for nullish values ([1ff4076](vuejs/core@1ff4076)), closes [#10725](vuejs/core#10725) * **deps:** update compiler ([#10760](vuejs/core#10760)) ([15df5c1](vuejs/core@15df5c1)) * **runtime-core:** fix edge case of KeepAlive inside Transition with slot children ([#10719](vuejs/core#10719)) ([e51ca61](vuejs/core@e51ca61)), closes [#10708](vuejs/core#10708) * **runtime-core:** further fix slots _ctx check ([cde7f05](vuejs/core@cde7f05)), closes [#10724](vuejs/core#10724) * **runtime-core:** props should be readonly via direct template access ([b93f264](vuejs/core@b93f264)), closes [#8216](vuejs/core#8216) [#10736](vuejs/core#10736) * **transition:** transition is breaking/flickering when enter is canceled ([#10688](vuejs/core#10688)) ([65109a7](vuejs/core@65109a7)) ## [3.4.23](vuejs/core@v3.4.22...v3.4.23) (2024-04-16) ### Bug Fixes * **runtime-core:** fix regression for $attrs tracking in slots ([6930e60](vuejs/core@6930e60)), closes [#10710](vuejs/core#10710) * **runtime-core:** use same internal object mechanism for slots ([6df53d8](vuejs/core@6df53d8)), closes [#10709](vuejs/core#10709) ## [3.4.22](vuejs/core@v3.4.21...v3.4.22) (2024-04-15) ### Bug Fixes * **compat:** fix $options mutation + adjust private API initialization ([d58d133](vuejs/core@d58d133)), closes [#10626](vuejs/core#10626) [#10636](vuejs/core#10636) * **compile-sfc:** analyze v-bind shorthand usage in template ([#10518](vuejs/core#10518)) ([e5919d4](vuejs/core@e5919d4)), closes [#10515](vuejs/core#10515) * **compiler-core:** fix loc.source for end tags with whitespace before > ([16174da](vuejs/core@16174da)), closes [#10694](vuejs/core#10694) [#10695](vuejs/core#10695) * **compiler-core:** fix v-bind shorthand for component :is ([04af950](vuejs/core@04af950)), closes [#10469](vuejs/core#10469) [#10471](vuejs/core#10471) * **compiler-sfc:** :is() and :where() in compound selectors ([#10522](vuejs/core#10522)) ([660cadc](vuejs/core@660cadc)), closes [#10511](vuejs/core#10511) * **compiler-sfc:** also search for `.tsx` when type import's extension is omitted ([#10637](vuejs/core#10637)) ([34106bc](vuejs/core@34106bc)), closes [#10635](vuejs/core#10635) * **compiler-sfc:** fix defineModel coercion for boolean + string union types ([#9603](vuejs/core#9603)) ([0cef65c](vuejs/core@0cef65c)), closes [#9587](vuejs/core#9587) [#10676](vuejs/core#10676) * **compiler-sfc:** fix universal selector scope ([#10551](vuejs/core#10551)) ([54a6afa](vuejs/core@54a6afa)), closes [#10548](vuejs/core#10548) * **compiler-sfc:** use options module name if options provide runtimeModuleName options ([#10457](vuejs/core#10457)) ([e76d743](vuejs/core@e76d743)), closes [#10454](vuejs/core#10454) * **custom-element:** avoid setting attr to null if it is removed ([#9012](vuejs/core#9012)) ([b49306a](vuejs/core@b49306a)), closes [#9006](vuejs/core#9006) [#10324](vuejs/core#10324) * **hydration:** properly handle optimized mode during hydrate node ([#10638](vuejs/core#10638)) ([2ec06fd](vuejs/core@2ec06fd)), closes [#10607](vuejs/core#10607) * **reactivity:** computed should not be detected as true by isProxy ([#10401](vuejs/core#10401)) ([9da34d7](vuejs/core@9da34d7)) * **reactivity:** fix hasOwnProperty key coercion edge cases ([969c5fb](vuejs/core@969c5fb)) * **reactivity:** fix tracking when hasOwnProperty is called with non-string value ([c3c5dc9](vuejs/core@c3c5dc9)), closes [#10455](vuejs/core#10455) [#10464](vuejs/core#10464) * **runtime-core:** fix errorHandler causes an infinite loop during execution ([#9575](vuejs/core#9575)) ([ab59bed](vuejs/core@ab59bed)) * **runtime-core:** handle invalid values in callWithAsyncErrorHandling ([53d15d3](vuejs/core@53d15d3)) * **runtime-core:** show hydration mismatch details for non-rectified mismatches too when __PROD_HYDRATION_MISMATCH_DETAILS__ is set ([#10599](vuejs/core#10599)) ([0dea7f9](vuejs/core@0dea7f9)) * **runtime-dom:** `v-model` string/number coercion for multiselect options ([#10576](vuejs/core#10576)) ([db374e5](vuejs/core@db374e5)) * **runtime-dom:** fix css v-bind for suspensed components ([#8523](vuejs/core#8523)) ([67722ba](vuejs/core@67722ba)), closes [#8520](vuejs/core#8520) * **runtime-dom:** force update v-model number with leading 0 ([#10506](vuejs/core#10506)) ([15ffe8f](vuejs/core@15ffe8f)), closes [#10503](vuejs/core#10503) [#10615](vuejs/core#10615) * **runtime-dom:** sanitize wrongly passed string value as event handler ([#8953](vuejs/core#8953)) ([7ccd453](vuejs/core@7ccd453)), closes [#8818](vuejs/core#8818) * **ssr:** don't render v-if comments in TransitionGroup ([#6732](vuejs/core#6732)) ([5a96267](vuejs/core@5a96267)), closes [#6715](vuejs/core#6715) * **Transition:** ensure the KeepAlive children unmount w/ out-in mode ([#10632](vuejs/core#10632)) ([fc99e4d](vuejs/core@fc99e4d)), closes [#10620](vuejs/core#10620) * **TransitionGroup:** avoid set transition hooks for comment nodes and text nodes ([#9421](vuejs/core#9421)) ([140a768](vuejs/core@140a768)), closes [#4621](vuejs/core#4621) [#4622](vuejs/core#4622) [#5153](vuejs/core#5153) [#5168](vuejs/core#5168) [#7898](vuejs/core#7898) [#9067](vuejs/core#9067) * **types:** avoid merging object union types when using withDefaults ([#10596](vuejs/core#10596)) ([37ba93c](vuejs/core@37ba93c)), closes [#10594](vuejs/core#10594) ### Performance Improvements * add `__NO_SIDE_EFFECTS__` comments ([#9053](vuejs/core#9053)) ([d46df6b](vuejs/core@d46df6b)) * optimize component props/slots internal object checks ([6af733d](vuejs/core@6af733d)) * **ssr:** avoid calling markRaw on component instance proxy ([4bc9f39](vuejs/core@4bc9f39)) * **ssr:** optimize setup context creation for ssr in v8 ([ca84316](vuejs/core@ca84316)) ## [3.4.21](vuejs/core@v3.4.20...v3.4.21) (2024-02-28) ### Bug Fixes * **runtime-dom:** avoid unset option's value ([#10416](vuejs/core#10416)) ([b3f8b5a](vuejs/core@b3f8b5a)), closes [#10412](vuejs/core#10412) [#10396](vuejs/core#10396) * **suspense:** ensure nested suspense patching if in fallback state ([#10417](vuejs/core#10417)) ([7c97778](vuejs/core@7c97778)), closes [#10415](vuejs/core#10415) * **warning:** stringify args in warn handler ([#10414](vuejs/core#10414)) ([bc37258](vuejs/core@bc37258)), closes [#10409](vuejs/core#10409) ## [3.4.20](vuejs/core@v3.4.19...v3.4.20) (2024-02-26) ### Bug Fixes * **parser:** should not treat uppercase components as special tags ([e0e0253](vuejs/core@e0e0253)), closes [#10395](vuejs/core#10395) * **runtime-dom:** avoid always resetting nullish option value ([ff130c4](vuejs/core@ff130c4)), closes [#10396](vuejs/core#10396) * **runtime-dom:** fix nested v-show priority regression ([364f890](vuejs/core@364f890)), closes [#10338](vuejs/core#10338) * **runtime-dom:** v-bind style should clear previous css string value ([#10373](vuejs/core#10373)) ([e2d3235](vuejs/core@e2d3235)), closes [#10352](vuejs/core#10352) * **suspense:** handle suspense switching with nested suspense ([#10184](vuejs/core#10184)) ([0f3da05](vuejs/core@0f3da05)), closes [#10098](vuejs/core#10098) * **types:** better typing for direct setup signature of defineComponent ([#10357](vuejs/core#10357)) ([eadce5b](vuejs/core@eadce5b)), closes [#8604](vuejs/core#8604) [#8855](vuejs/core#8855) ## [3.4.19](vuejs/core@v3.4.18...v3.4.19) (2024-02-13) ### Bug Fixes * **deps:** pin lru-cache to avoid hashing error ([b8be990](vuejs/core@b8be990)), closes [#10300](vuejs/core#10300) * **hydration:** fix css vars hydration mismatch false positive on non-root nodes ([995d2fd](vuejs/core@995d2fd)), closes [#10317](vuejs/core#10317) [#10325](vuejs/core#10325) * **runtime-dom:** should not trigger transition when v-show value is falsy ([#10311](vuejs/core#10311)) ([e509639](vuejs/core@e509639)) ### Features > Note: this warning is categorized as a feature but released in a patch because it does not affect public APIs. * **dx:** warn users when computed is self-triggering ([#10299](vuejs/core#10299)) ([f7ba97f](vuejs/core@f7ba97f)) ### Performance Improvements * **runtime:** improve `getType()` GC and speed ([#10327](vuejs/core#10327)) ([603a1e1](vuejs/core@603a1e1))

posva added the has workaround A workaround has been found to avoid the problem label May 3, 2021

HcySunYang added the 🐞 bug Something isn't working label May 6, 2021

khalo-sa mentioned this issue Oct 14, 2021

Leaving transition element not reacting to changes triggered in before-leave hook #4795

Open

edison1105 mentioned this issue Mar 12, 2024

fix(runtime-core): optimize judgment #10497

Closed

This was referenced Apr 26, 2024

fix(runtime-core): catch undefined element #4091

Closed

fix(runtime-core): properly handle inherit transition during clone VNode #10809

Merged

yyx990803 added a commit to edison1105/vuejs-core that referenced this issue Apr 29, 2024

chore: Merge branch 'main' into fix/vuejs#3716

09f19b5

yyx990803 added a commit to edison1105/vuejs-core that referenced this issue Apr 29, 2024

Merge branch 'main' into fix/vuejs#3716

32215c5

yyx990803 closed this as completed in #10809 Apr 29, 2024

yyx990803 pushed a commit that referenced this issue Apr 29, 2024

fix(runtime-core): properly handle inherit transition during clone VN…

638a79f

…ode (#10809) close #3716 close #10497 close #4091

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrapping around transition component throws when transition is toggled before it has completed previously #3716

Wrapping around transition component throws when transition is toggled before it has completed previously #3716

A-Babin commented May 1, 2021 •

edited

A-Babin commented May 1, 2021

edison1105 commented May 2, 2021 •

edited

A-Babin commented May 2, 2021 •

edited

posva commented May 3, 2021

A-Babin commented May 3, 2021

lidlanca commented May 4, 2021

HcySunYang commented May 6, 2021

unshame commented Aug 11, 2023

Wrapping around transition component throws when transition is toggled before it has completed previously #3716

Wrapping around transition component throws when transition is toggled before it has completed previously #3716

Comments

A-Babin commented May 1, 2021 • edited

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

A-Babin commented May 1, 2021

edison1105 commented May 2, 2021 • edited

A-Babin commented May 2, 2021 • edited

posva commented May 3, 2021

A-Babin commented May 3, 2021

lidlanca commented May 4, 2021

HcySunYang commented May 6, 2021

unshame commented Aug 11, 2023

A-Babin commented May 1, 2021 •

edited

edison1105 commented May 2, 2021 •

edited

A-Babin commented May 2, 2021 •

edited