Semantic-ui: Transition: Element is no longer attached to DOM. Unable to animate.

Created on 25 Apr 2016 · 11Comments · Source: Semantic-Org/Semantic-UI

I'm unable to make a popup appear when hovering on an item. I'm trying to mimic the second demo of the menu collection.

Here is my code: (Using Jade)

      .ui.text.menu
        .item
          img(src='images/new-school.jpg')
        a.browse.item Browse Courses
          i.material-icons arrow_drop_down
      .ui.special.popup
        .ui.three.column.relaxed.divided.grid
          .column
            h4.ui.header Business
            .ui.link.list
              a.item Design & Urban Ecologies
              a.item Fashion Design
              a.item Fine Art
              a.item Strategic Design
          .column
            h4.ui.header Liberal Arts
            .ui.link.list
              a.item Anthropology
              a.item Economics
              a.item Media Studies
              a.item Philosophy
          .column
            h4.ui.header Social Sciences
            .ui.link.list
              a.item Food Studies
              a.item Journalism
              a.item Non Profit Management

var initialize = {
  popup: function() {
    $('nav .menu .browse').popup({
      popup: '.special.popup',
      inline: true
    });
  }
}
initialize.popup();

And I'm getting this in the console:
semantic.min.js:17 Transition: Element is no longer attached to DOM. Unable to animate. scale in
AtDhVaAnNkCsE

Source

swordling

Most helpful comment

Occurs when transition.css is not being loaded in

lukesnowden on 27 Jul 2017

👍26 ❤9 🎉2

All 11 comments

I was able to fix it. It turns out you cannot use the 'Amazon' theme under the transitions variable in the themes.config file. Changing that back to default fixed it.

swordling on 25 Apr 2016

👍4

it works @swordling

catimos on 2 Jul 2016

@swordling Would you mind telling me where the themes.config file is. I have the same problem like you when I use the semantic popup and swiper.js together. I use the semantic by semantic-ui-sass. Any tips would be appreciate.

BoleLee on 3 Jan 2017

I wanted to understand why setting a custom theme with missing definitions to all components worked for some components but not for others. (i.e. it works for accordion, but not nor transitions)
I found the reason here. The point is, that if you set a component to a custom theme, the overrides are not inherited from the default theme.
For components that do not have any overrides in the default theme, setting them to a custom theme can work just fine. However if there are overrides in the default theme for that component then they are ignored when the custom theme inherits from the default. And this is the case with Transitions. All the cool transitions are defined as overrides in the default theme. Even the ones that are used by i.e. accordion natively.