javascript - Popper js为 Action 菜单添加动画

Question

我正在使用 popper js 创建一个操作菜单。

this.popper = new Popper(originElement, dropdownElement,  {,
      removeOnDestroy: true,
      modifiers: {
        applyStyle: {
          onLoad: () => {
            dropdownElement.style.display = "block";
          }
        }
      }
    });

我的问题是它只显示没有动画的下拉菜单。我在文档中找不到任何关于动画的内容。如何添加动画？

Answer 1

没有“动画”的原因是你从display: none; 过渡到display: block。

没有办法为这两种状态之间的变化设置动画，但是有不同的方法可以解决这个问题。例如，您可以将 opacity: 0 设置为 opacity: 1 的动画，这将使下拉菜单淡入/淡出。

我个人最喜欢的是动画最大高度。为此:像这样设置菜单的 CSS:

.yourclassname {
   max-height:0;
   overflow:hidden; /* Like this your content will not be visible until the height is high enough */
   transition: max-height ease .5s; /* Animation */
}

在 JS 中，您需要做的就是将最大高度设置为 1000 像素或更小/更大，然后您的动画就完成了。