下拉菜单与表单中的其他输入重叠

Question

我正在使用 Angular、Semantic-UI 和 Animate 开发一个应用程序。

我正在创建一个表单，但在打开时遇到与其他输入重叠的下拉菜单问题。

这是一个 Plunker：https://plnkr.co/edit/BTCxfk

如您所见，从 Semantic-UI fields 类中删除 animated fadeIn 动画可以解决问题。

那么，我该怎么做才能继续使用 Semantic-UI 和 Animate 并让下拉菜单正常工作而没有错误？

Answer 1

在这种情况下，建议使用语义 UI 中内置的 fade in 动画（过渡）。这不会在下拉列表中造成任何错误。所以首先 删除 animated fadeIn 类，然后将您的代码更改为以下内容：

export class App {

  constructor() {

    jQuery('.fields')
  .transition('fade in')
;
    setTimeout(() => {
      jQuery('.ui.dropdown').dropdown();
    }, 1000);)
  }
}

请注意，您可以为过渡设置参数，例如：持续时间、回调...，在过渡设置中：

jQuery('.fields')
  .transition({
    animation  : 'fade in',
    duration   : '2s',
    onComplete : function() {
      alert('done');
    }
  })
;

更多设置见Docs