{"record":{"id":"afa8b20081aee22f","repo":"Meituan-Dianping/mpvue","slug":"transition-can-only-be-used-on-a-single-element","errorCode":null,"errorMessage":"<transition> can only be used on a single element. Use <transition-group> for lists.","messagePattern":"<transition> can only be used on a single element\\. Use <transition-group> for lists\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/platforms/web/runtime/components/transition.js","lineNumber":99,"sourceCode":"  props: transitionProps,\n  abstract: true,\n\n  render (h: Function) {\n    let children: ?Array<VNode> = this.$options._renderChildren\n    if (!children) {\n      return\n    }\n\n    // filter out text nodes (possible whitespaces)\n    children = children.filter((c: VNode) => c.tag || isAsyncPlaceholder(c))\n    /* istanbul ignore if */\n    if (!children.length) {\n      return\n    }\n\n    // warn multiple elements\n    if (process.env.NODE_ENV !== 'production' && children.length > 1) {\n      warn(\n        '<transition> can only be used on a single element. Use ' +\n        '<transition-group> for lists.',\n        this.$parent\n      )\n    }\n\n    const mode: string = this.mode\n\n    // warn invalid mode\n    if (process.env.NODE_ENV !== 'production' &&\n      mode && mode !== 'in-out' && mode !== 'out-in'\n    ) {\n      warn(\n        'invalid <transition> mode: ' + mode,\n        this.$parent\n      )\n    }\n","sourceCodeStart":81,"sourceCodeEnd":117,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/web/runtime/components/transition.js#L81-L117","documentation":"<transition> animates exactly one element at a time by toggling classes on `children[0]`. When its slot renders more than one child, Vue cannot decide which element to animate, so in development it warns that transition can only be used on a single element and suggests <transition-group> for lists. The render still proceeds using the first child, but additional children are not animated and behavior is undefined.","triggerScenarios":"Placing two or more sibling elements directly inside <transition>, e.g. `<transition><div v-if=\"a\"/><div v-else/><div>extra</div></transition>`; v-for inside <transition>; a v-if/v-else-if/v-else chain with an extra unconditioned sibling.","commonSituations":"Adding a wrapper element or icon next to the toggled element inside transition; forgetting that comments/whitespace text nodes are filtered but extra elements are not; converting a v-show toggle into two v-if elements.","solutions":["Ensure the transition contains exactly one element: use v-if/v-else so only one renders at a time.","If multiple items should animate independently, switch to <transition-group> with keyed children.","Move any extra sibling elements outside the <transition> wrapper.","Wrap multiple always-present elements into one container element inside the transition."],"exampleFix":"// before\n<transition name=\"fade\">\n  <div v-if=\"ok\">A</div>\n  <div v-else>B</div>\n  <span>note</span>\n</transition>\n// after\n<div>\n  <transition name=\"fade\">\n    <div v-if=\"ok\">A</div>\n    <div v-else>B</div>\n  </transition>\n  <span>note</span>\n</div>","handlingStrategy":"validation","validationCode":"// check slot renders a single element before enabling transition\nconst childCount = document.querySelectorAll('#transition-wrapper > *').length\nif (childCount > 1) console.warn('<transition> slot renders ' + childCount + ' elements; must be exactly 1')","typeGuard":"const hasSingleChild = children => Array.isArray(children) && children.length === 1","tryCatchPattern":null,"preventionTips":["Use v-if/v-else pairs so only one element exists at a time inside <transition>.","Keep auxiliary siblings outside the transition wrapper.","Use <transition-group> whenever more than one element may render.","Review templates after refactoring v-show into v-if branches."],"tags":["vue","transition","slot","animation","render"],"backgroundTag":"transition-multiple-children","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}