Meteor 1.3+中不起作用的语义UI转换

Question

我最近升级到Meteor1.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>​。

这也发生在popup上。

这似乎与this question类似，后者仍在等待一个可接受的答案。

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

Answer 1

基于上面Pankaj的建议，我仔细研究了导入，但没有在JS文件中查看。

事实证明，这个问题是由于语义UI的主题化机制造成的。我正在使用材料主题，并已将themes.config.import.less中的所有内容转换为'material。

修复的结果是将@transition : 'material'; @transition : 'default'; 重置为@transition : 'default'; in client/lib/semantic-ui/themes.config.import.less

解决了过渡和弹出的问题。而且，由于我有semantic:ui包，所以不需要导入或使用像semantic:ui-transition这样的包。

谢谢潘卡吉把我带到了我需要继续的轨道上。