{"record":{"id":"e5a6ef9f5c24132e","repo":"Meituan-Dianping/mpvue","slug":"invalid-transition-mode-mode","errorCode":null,"errorMessage":"invalid <transition> mode: ${mode}","messagePattern":"invalid <transition> mode: (.+?)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/platforms/web/runtime/components/transition.js","lineNumber":112,"sourceCode":"      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\n    const rawChild: VNode = children[0]\n\n    // if this is a component root node and the component's\n    // parent container node also has transition, skip.\n    if (hasParentTransition(this.$vnode)) {\n      return rawChild\n    }\n\n    // apply transition data to child\n    // use getRealChild() to ignore abstract components e.g. keep-alive\n    const child: ?VNode = getRealChild(rawChild)\n    /* istanbul ignore if */\n    if (!child) {","sourceCodeStart":94,"sourceCodeEnd":130,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/web/runtime/components/transition.js#L94-L130","documentation":"The <transition> component accepts an optional `mode` prop controlling the ordering of enter/leave transitions; only 'in-out' and 'out-in' are valid. If a mode value is provided that is neither (e.g. a typo), Vue warns 'invalid <transition> mode' in development and falls back to the default simultaneous transition behavior.","triggerScenarios":"Setting `<transition mode=\"fade\">` or `mode=\"inout\"` / `mode=\"out-in \"` (typo/whitespace); binding `:mode=\"someVar\"` where the variable holds an unsupported string like 'sequential' or is misspelled.","commonSituations":"Confusing the transition `name` (CSS class prefix) with `mode`; copying mode values from other animation libraries (e.g. 'fade', 'slide'); renaming mode strings during refactors without updating the binding.","solutions":["Use exactly 'in-out' or 'out-in' for the mode attribute, or remove mode entirely for the default simultaneous behavior.","If mode is bound to a variable, validate the variable's value and correct typos/whitespace.","Remember `name` is for the CSS class prefix, not the transition ordering — don't put animation names in mode.","Trim/normalize dynamic mode strings before passing them to the component."],"exampleFix":"// before\n<transition name=\"fade\" mode=\"fade\">\n// after\n<transition name=\"fade\" mode=\"out-in\">","handlingStrategy":"validation","validationCode":"const mode = this.transitionMode\nif (mode != null && !['in-out', 'out-in'].includes(mode)) {\n  console.warn('invalid <transition> mode: ' + mode)\n}","typeGuard":"const isValidMode = m => m == null || m === 'in-out' || m === 'out-in'","tryCatchPattern":null,"preventionTips":["Only use 'in-out' or 'out-in' as mode values; omit mode for default behavior.","Never put CSS animation names (fade, slide) in mode — those belong in name.","Validate dynamic :mode bindings against the allowed set.","Watch for trailing whitespace in template attribute values."],"tags":["vue","transition","mode","props","animation"],"backgroundTag":"invalid-prop-value","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}