Semantic-Org/UI-Transition

$module.transition is not a function

Opened this issue · 3 comments

labkode commented

I am receiving this error when using semantic-ui-transition through browserify

Uncaught TypeError: $module.transition is not a function

My code is this:

var $ = require('jquery');
$.fn.dropdown = require("semantic-ui-dropdown");
$.fn.transition = require("semantic-ui-transition");
var Mn = require("backbone.Marionette");

module.exports = Mn.ItemView.extend({
        tagName: "div",
        attributes: {
            id: "header-app",
        },
        ui: {
            menu: ".ui .dropdown",
        },
        template: "#header-app-template",
        onShow:function() {
            this.ui.menu.dropdown();
        }
});
cozuya commented

So no one else has a denvercoder9, I resolved this (for the modal) by doing:

let $ = require('jquery'),
    Modal = require('semantic-ui-modal'),
    Dimmer = require('semantic-ui-dimmer'),
    Transition = require('semantic-ui-transition');

$.fn.transition = Transition;
$.fn.modal = Modal;
$.fn.dimmer = Dimmer;

So probably just an order thing.

  • 👍3
jlukic commented

This would occur if CSS transition is not defined. It checks before running animation.

aullah commented

For anyone who finds this, if you're having similar issues when trying to only use the modal component in Semantic UI rather than the entire framework, the modal requires other dependencies (minified version is optional of course):

  • transition.min.js and transition.min.css
  • dimmer.min.js and dimmer.min.css
  • modal.min.js and modal.min.css

All the best.

  • 👍2