語義UI過渡在Meteor 1.3+中不起作用

Question

我最近升級到Meteor 1.3.2.4，所有Javascript行為似乎都已損壞。 例如，我有一個與此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>

而這個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');
  },
});

當我單擊關閉圖標時，我收到錯誤Transition: Element is no longer attached to DOM. Unable to animate. fade <div class=​"ui error message">​…​</div>​ Transition: Element is no longer attached to DOM. Unable to animate. fade <div class=​"ui error message">​…​</div>​

popup也會發生這種情況。

這似乎類似於此問題 ， 該問題仍在等待接受的答案。

項目分支： https : //github.com/blueknightone/2-minute-attack/tree/2-minute-attack-11

Answer 1

根據上面的Pankaj Jatav的建議，我更仔細地研究了導入，而不是JS文件。

事實證明，該問題是由於語義UI的主題化機制引起的。 我正在使用Material主題，並且已將themes.config.import.less中'material所有內容都切換為'material 。

解決方法是重置@transition : 'material'; 到@transition : 'default'; 在client/lib/semantic-ui/themes.config.import.less

這解決了過渡和彈出窗口的問題。 而且由於我具有semantic:ui軟件包，因此不需要導入或使用諸如semantic:ui-transition類的軟件包。

感謝Pankaj讓我步入正軌。