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

Question

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

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

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

正如您所看到的，从语义-UI animated fadeIn类中删除fields动画可以解决问题。

然后，我可以做些什么来继续使用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);)
  }
}

请注意，您可以为转换设置参数，例如：duration，callback ...，在转换设置中：

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

有关更多设置，请参阅Docs