菜单折叠时闪烁的问题答案

【问题标题】：Flickering Issue on menu collapse菜单折叠时闪烁的问题
【发布时间】：2020-11-14 11:57:38
【问题描述】：

在www.rohiniartstudio.com 的响应式/移动视图中时当我单击菜单时，菜单在折叠时闪烁并显示菜单下方的内容。默认情况下，在显示菜单项之前大约需要 1-2 秒，然后添加此代码：

.collapsing 
{
  -webkit-transition: none;
    transition: none;
    display: none;
}

有人可以帮我解决闪烁的问题吗？请访问该网站并告诉我？

【问题讨论】：

欢迎来到 Stack Overflow。请查看How do I ask a good question 以了解您需要在问题中向我们提供什么。您应该已尝试解决问题，并且您的问题应包括您尝试解决的问题以及所有相关代码（并且仅相关代码) 在minimal, reproducible example，所以我们可以提供帮助。

【解决方案1】：

尝试从 data-target 属性中删除 # 值

设置为 data-target="site-navigation"。

【讨论】：

【解决方案2】：

当您想要制作带有过渡的动画时，您不能使用display 属性。元素和所有位置都应该由 CSS 可数。参考：https://stackoverflow.com/a/38772750/9218664

如果您想在移动手风琴菜单上制作动画，您应该使用不带display 的max-height 属性。

你可以在这里看到它是如何发生的； https://codepen.io/volcanioo/pen/LYGaJdV

【讨论】：