语义 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>

这也发生在 popup。

这似乎与 this question 相似，仍在等待接受的答案。

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

Answer 1

根据 Pankaj Jatav 的上述建议，我仔细查看了导入，但没有在 JS 文件中查看。

原来问题出在Semantic-UI的主题机制上。我正在使用 Material 主题，并将 themes.config.import.less 中的所有内容切换为 'material。

修复结果是在 client/lib/semantic-ui/themes.config.import.less

中将 @transition : 'material'; 重置为 @transition : 'default';

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

感谢 Pankaj 让我走上了我需要继续前进的轨道。

语义 UI 过渡在 Meteor 1.3+ 中不起作用

Semantic UI Transition not working in Meteor 1.3+

jquery

meteor

semantic-ui