{"record":{"id":"2d1d5c86650e5b2e","repo":"Meituan-Dianping/mpvue","slug":"transition-explicit-name-duration-is-not-a-va","errorCode":null,"errorMessage":"<transition> explicit ${name} duration is not a valid number - got ${JSON.stringify(val)}.","messagePattern":"<transition> explicit (.+?) duration is not a valid number - got (.+?)\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/platforms/web/runtime/modules/transition.js","lineNumber":281,"sourceCode":"          if (isValidDuration(explicitLeaveDuration)) {\n            setTimeout(cb, explicitLeaveDuration)\n          } else {\n            whenTransitionEnds(el, type, cb)\n          }\n        }\n      })\n    }\n    leave && leave(el, cb)\n    if (!expectsCSS && !userWantsControl) {\n      cb()\n    }\n  }\n}\n\n// only used in dev mode\nfunction checkDuration (val, name, vnode) {\n  if (typeof val !== 'number') {\n    warn(\n      `<transition> explicit ${name} duration is not a valid number - ` +\n      `got ${JSON.stringify(val)}.`,\n      vnode.context\n    )\n  } else if (isNaN(val)) {\n    warn(\n      `<transition> explicit ${name} duration is NaN - ` +\n      'the duration expression might be incorrect.',\n      vnode.context\n    )\n  }\n}\n\nfunction isValidDuration (val) {\n  return typeof val === 'number' && !isNaN(val)\n}\n\n/**","sourceCodeStart":263,"sourceCodeEnd":299,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/web/runtime/modules/transition.js#L263-L299","documentation":"Vue's <transition> component accepts an explicit `duration` prop (number or object of enter/leave durations). In development mode, checkDuration validates each value and warns when a duration is set to something that is not a number, e.g. a string like '300'. Vue does not coerce values, so a non-numeric duration silently breaks transition timing; this warning surfaces the mistake.","triggerScenarios":"Setting the duration prop on <transition> (or explicit enter/leave hooks calling enter/leave with a duration option) to a value whose typeof is not 'number' — e.g. duration=\"300\" without a binding (passes the string '300'), or duration=\"{enter: 100, leave: '200'}\" via a non-bound attribute.","commonSituations":"Writing duration=\"300\" as a plain HTML attribute instead of :duration=\"300\"; reading durations from JSON/config where they come back as strings; passing NaN-producing expressions; refactoring from numeric literals to props that hold strings.","solutions":["Bind the value so it stays a number: use :duration=\"300\" instead of duration=\"300\".","If the value comes from config/props, convert it with Number(val) or parseInt(val, 10) before passing.","If using an object form, ensure both enter and leave keys are numbers.","Parse user/URL input to numbers before assigning to duration."],"exampleFix":"// before\n<transition duration=\"300\">...</transition>\n// after\n<transition :duration=\"300\">...</transition>","handlingStrategy":"validation","validationCode":"function isValidDuration(d) {\n  if (typeof d === 'number') return !isNaN(d)\n  if (d && typeof d === 'object') {\n    return ['enter', 'leave'].every(k => typeof d[k] === 'number' && !isNaN(d[k]))\n  }\n  return false\n}\n// before render: if (!isValidDuration(this.duration)) this.duration = 300","typeGuard":"function isFiniteDuration(v) {\n  return typeof v === 'number' && !Number.isNaN(v)\n}","tryCatchPattern":null,"preventionTips":["Always use the :duration binding, never a plain attribute, when passing numbers.","Coerce external/string config values with Number() before assigning.","Keep durations as number literals or typed props (default: number)."],"tags":["vue","transition","dev-warning","type-error"],"backgroundTag":"invalid-prop-type","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}