Meituan-Dianping/mpvue · warning

invalid <transition> mode: ${mode}

Error message

invalid <transition> mode: ${mode}

What it means

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.

Source

Thrown at src/platforms/web/runtime/components/transition.js:112

      return
    }

    // warn multiple elements
    if (process.env.NODE_ENV !== 'production' && children.length > 1) {
      warn(
        '<transition> can only be used on a single element. Use ' +
        '<transition-group> for lists.',
        this.$parent
      )
    }

    const mode: string = this.mode

    // warn invalid mode
    if (process.env.NODE_ENV !== 'production' &&
      mode && mode !== 'in-out' && mode !== 'out-in'
    ) {
      warn(
        'invalid <transition> mode: ' + mode,
        this.$parent
      )
    }

    const rawChild: VNode = children[0]

    // if this is a component root node and the component's
    // parent container node also has transition, skip.
    if (hasParentTransition(this.$vnode)) {
      return rawChild
    }

    // apply transition data to child
    // use getRealChild() to ignore abstract components e.g. keep-alive
    const child: ?VNode = getRealChild(rawChild)
    /* istanbul ignore if */
    if (!child) {

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Use exactly 'in-out' or 'out-in' for the mode attribute, or remove mode entirely for the default simultaneous behavior.
2. If mode is bound to a variable, validate the variable's value and correct typos/whitespace.
3. Remember `name` is for the CSS class prefix, not the transition ordering — don't put animation names in mode.
4. Trim/normalize dynamic mode strings before passing them to the component.

Example fix

// before
<transition name="fade" mode="fade">
// after
<transition name="fade" mode="out-in">

const mode = this.transitionMode
if (mode != null && !['in-out', 'out-in'].includes(mode)) {
  console.warn('invalid <transition> mode: ' + mode)
}

const isValidMode = m => m == null || m === 'in-out' || m === 'out-in'

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• <transition> can only be used on a single element. Use <tran
• Avoid mutating a prop directly since the value will be overw
• The data property "${key}" is already declared as a prop. Us
• The computed property "${key}" is already defined as a prop.
• method "${key}" has already been defined as a prop.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/e5a6ef9f5c24132e. Report an issue: GitHub.