Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error thrown when using transition-group with conditionally rendered children

See original GitHub issue

Version

2.5.16

Reproduction link

https://codepen.io/riophae/pen/EpgWdZ

Steps to reproduce

Open the pen and it shows 1, 3, 5
Click the button

What is expected?

It should show 3, 5

What is actually happening?

Got this error in console:

[Vue warn]: Error in render: "TypeError: c$1.elm.getBoundingClientRect is not a function"

found in

---> <TransitionGroup>
       <Root>

TypeError: c$1.elm.getBoundingClientRect is not a function
   at Proxy.render (VM643 vue.js:8383)
   at VueComponent.Vue._render (VM643 vue.js:4535)
   at VueComponent.updateComponent (VM643 vue.js:2788)
   at Watcher.get (VM643 vue.js:3140)
   at Watcher.run (VM643 vue.js:3217)
   at flushSchedulerQueue (VM643 vue.js:2981)
   at Array.<anonymous> (VM643 vue.js:1839)
   at MessagePort.flushCallbacks (VM643 vue.js:1760)

Issue Analytics

State:
Created 5 years ago
Reactions:12
Comments:13 (1 by maintainers)

Top GitHub Comments

4reactions

yannisgucommented, Apr 16, 2020

PR which would fix this issue: #11128

4reactions

maxirozaycommented, Jul 19, 2018

The transition try to modify an element from the v-for that is not rendered because of the v-if. You can use v-show instead of v-if to render the element. The best solution for me would be to filter the list in a computed property and give the filtered list in your v-for.

Top Results From Across the Web

react-transition-group conditionally animate out - Stack Overflow

This is my general setup, I have list component that renders a number of children. There are a number of interactions that cause...

React Transition component - Material UI - MUI

To animate a component when it is mounted or unmounted, you can use the TransitionGroup component from react-transition-group. As components are added or ......

error: a <route> is only ever to be used as the child ... - You.com

If you are using react-router-dom v4, you need to wrap Route s in a Router ... Conditionally render the component's children or navigate...

react-addons-css-transition-group | Yarn - Package Manager

Keep using ReactDOM.render if you're just doing client-side rendering. ... Errors in the render and lifecycle methods now unmount the component tree by...

Useful Patterns by Use Case - React TypeScript Cheatsheets

no error return <Button type="button"> text </Button>; ... {props.children} ... generic-react-typescript-component-with-as-prop-able-to-render-any-valid-dom.