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中你需要做的就是将最大高度设置为1000px或更少/更多，你的动画就完成了。

Popper js将动画添加到动作菜单中

1 个答案: