1

In an Angular2 template, I am using the Semantics controls. It is working well but in dev tools console it is showing error messages like this:

Transition: Element is no longer attached to DOM. Unable to animate. 
slide down out http://localhost:8080/js/semantic.min.js1464716916849

What does this error message mean?

Peter David Carter
  • 2,548
  • 8
  • 25
  • 44
yala ramesh
  • 3,362
  • 1
  • 22
  • 35
  • Your element is removed from DOM by using structural directive such as ngIf so the trigger click event on document cannot find that – Steve Lam Apr 05 '17 at 15:47
  • One way is restart it to init state like if dropdown is slidedown, slideup then process anything else, visit this link to know how integrate between directive and component http://stackoverflow.com/questions/40438486/calling-function-in-directive – Steve Lam Apr 05 '17 at 16:26

3 Answers3

2

I had the same issue, using semantic-ui-less with Angular 4. I found an answer here Transition: Element is no longer attached to DOM. Unable to animate.

In theme.config just set @transition : 'default' worked for me

Liviu
  • 452
  • 1
  • 5
  • 14
2

Make sure you load the semantic transition.css file.

S..
  • 5,511
  • 2
  • 36
  • 43
0

Got stucked at the same place. In my case I use webpack to build semantic UI parts in a bundle from semantic-ui-less npm package. If you use webpack or other bundler, make sure you have 'transition' module both in less and js dependencies included.

Stanislav E. Govorov
  • 161
  • 2
  • 6