Semantic UI Transition funktioniert nicht in Meteor 1.3+

Question

Ich habe vor kurzem auf Meteor 1.3.2.4 aktualisiert, und alle Javascript-Verhaltensweisen scheinen gebrochen zu sein. Zum Beispiel habe ich einen dismissable Nachrichtenblock mit diesem HTML:

<div class="ui error message"> 
    <i class="close icon"></i> 
    <div class="header"> 
     Your manual overrides are extremely limited in duration! 
    </div> 
    <span class="reason">You're wasting your time, Captain.</span> 
</div> 

Und dieses javascript:

import { Meteor } from 'meteor/meteor'; 
import { Template } from 'meteor/templating'; 
import { $ } from 'meteor/jquery'; 
import { FlowRouter } from 'meteor/kadira:flow-router'; 

import '../../../client/lib/semantic-ui/definitions/modules/transition'; 

import './login.html'; 

Template.App_login.events({ 
    'submit #login-form'(event) { 
     event.preventDefault(); 
     const user = event.target.user.value; 
     const password = event.target.password.value; 

     Meteor.loginWithPassword(user, password, (error) => { 
      if (error) { 
       $('.error.message').toggleClass('hidden') 
        .find('.reason').text(error.reason); 
      } else { 
       FlowRouter.go('App.home'); 
      } 
     }); 
    }, 
    'click .close.icon'(event) { 
     $(event.target).closest('.message').transition('fade'); 
    }, 
}); 

Wenn ich auf das Schließen-Symbol klicken ich den Fehler erhalten Transition: Element is no longer attached to DOM. Unable to animate. fade <div class=​"ui error message">​…​</div>​

Dies ist auch passiert mit popup.

Dies scheint ähnlich zu this question, die immer noch auf eine akzeptierte Antwort wartet.

Projekt Branche: https://github.com/blueknightone/2-minute-attack/tree/2-minute-attack-11

Answer 1

Basierend auf Pankaj Jatav Vorschlag oben, schaute ich auf die Einfuhren näher, aber nicht in der JS-Datei.

Es stellt sich heraus, dass das Problem auf den Theming-Mechanismus der Semantic-UI zurückzuführen ist. Ich benutze das Thema Material und habe alles in themes.config.import.less zu 'material geschaltet.

Das Update erwies sich als @transition : 'material'; zu @transition : 'default'; in client/lib/semantic-ui/themes.config.import.less

zurückgesetzt werden, dass das Problem mit Übergangsentropie und Popup fixiert. Und seit ich das semantic:ui Paket habe, werden keine Pakete wie semantic:ui-transition importiert oder benutzt.

Danke Pankaj für mich auf die Strecke zu bekommen, die ich weitermachen musste.