语义 UI 转换在 Meteor 1.3+ 中不起作用答案

【问题标题】：Semantic UI Transition not working in Meteor 1.3+语义 UI 转换在 Meteor 1.3+ 中不起作用
【发布时间】：2016-08-28 20:04:23
【问题描述】：

我最近升级到 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

【问题讨论】：

你的js文件中导入语义ui了吗
我正在使用semantic:ui 包，它应该可以在不导入的情况下工作。但是，是的，我已尝试同时导入 transition.js 和 transition.import.less 我将使用导入更新我的帖子。
我认为真正的问题是在导入时。你可以做的最好的事情是在控制台（浏览器）中检查。你也可以使用这个包atmospherejs.com/semantic/ui-transition。让我知道是否不起作用。

标签： jquery meteor semantic-ui

【解决方案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 让我走上我需要继续前进的轨道。

【讨论】：