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

Question

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

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

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

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

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

Answer 1

在这种情况下，建议在 semantic-ui 中使用 built-in fade in 动画（过渡）。这不会在下拉菜单中引起任何错误。所以首先删除 animated fadeIn class ，然后将您的代码更改为以下内容：

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

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

Dropdown menu overlaps other inputs in the form

animation

select

dropdown

semantic-ui

animate.css