Semantic-Org/Semantic-UI · error

This module requires ui transitions <https://github.com/Sema

Error message

This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>

What it means

animate.show()/hide() animate the menu via $.fn.transition (the Transition module). If transition != 'none' but $.fn.transition is undefined or unsupported, module.error(error.noTransition) fires and the menu fails to animate (and may not show/hide correctly).

Source

Thrown at src/definitions/modules/dropdown.js:3800

  namespace      : 'dropdown',

  message: {
    addResult     : 'Add <b>{term}</b>',
    count         : '{count} selected',
    maxSelections : 'Max {maxCount} selections',
    noResults     : 'No results found.',
    serverError   : 'There was an error contacting the server'
  },

  error : {
    action          : 'You called a dropdown action that was not defined',
    alreadySetup    : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
    labels          : 'Allowing user additions currently requires the use of labels.',
    missingMultiple : '<select> requires multiple property to be set to correctly preserve multiple values',
    method          : 'The method you called is not defined.',
    noAPI           : 'The API module is required to load resources remotely',
    noStorage       : 'Saving remote data requires session storage',
    noTransition    : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
  },

  regExp : {
    escape   : /[-[\]{}()*+?.,\\^$|#\s]/g,
    quote    : /"/g
  },

  metadata : {
    defaultText     : 'defaultText',
    defaultValue    : 'defaultValue',
    placeholderText : 'placeholder',
    text            : 'text',
    value           : 'value'
  },

  // property names for remote query
  fields: {
    remoteValues : 'results',  // grouping for api results

View on GitHub (pinned to 597843ab84)

Solutions

1. Include semantic-ui-transition.js (the transition component)
2. Or set transition:'none' so the menu toggles instantly without animation

Example fix

<!-- before: only dropdown.js loaded -->
<!-- after -->
<script src="transition.js"></script>
<script src="dropdown.js"></script>
// or disable animation
$('.ui.dropdown').dropdown({ transition: 'none' });

function transitionModuleAvailable() {
  return typeof $.fn.transition === 'function';
}
var ddOpts = {};
if (!transitionModuleAvailable()) {
  ddOpts.transition = 'none'; // skip animation, avoid error
}
$('.ui.dropdown').dropdown(ddOpts);

function hasTransitionModule() {
  return typeof $.fn !== 'undefined' && typeof $.fn.transition === 'function';
}

When it happens

Trigger: A dropdown built without the Transition module JS loaded, with the default transition:'auto'. Opening/closing tries to animate but cannot, so the menu appears stuck or fails to open.

Common situations: A trimmed build omitting transition.js; the dropdown seems to open but nothing is visible, or it throws this error in the console.

Related errors

• The API module is required to load resources remotely
• That animation is already occurring, cancelling repeated ani
• This module requires ui transitions <https://github.com/Sema
• There was an error contacting the server
• You called a dropdown action that was not defined

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/989ec6fac23042b9. Report an issue: GitHub.