单击菜单按钮时如何添加动画答案

【问题标题】：How to add animation when menu button is clicked单击菜单按钮时如何添加动画
【发布时间】：2018-07-29 11:07:49
【问题描述】：

动画就像菜单正在缓慢滑下，甚至可能淡入。

我更喜欢通过 CSS3 或 jQuery。我尝试在 toggleClass 中使用持续时间，并在公开课程中使用过渡，但似乎不起作用。

链接：https://codepen.io/selate/full/yvvyzz/

<html>
    *** Code in CodePen *
</html>

【问题讨论】：

我投票结束这个问题，因为没有尝试解决这个问题
问题中没有代码的暂存器链接的限制是有原因的 - 所以人们不必去场外了解您所问内容的上下文。规避该规则只会让您的问题被否决和/或关闭。请记住，人们正在放弃他们的时间来帮助您，因此您至少可以通过将您的代码放在问题中让他们尽可能轻松地回答。
muhammadOmerAslam 自过去 12 小时以来，我一直在尝试解决此问题，但似乎无法解决。所以我终于在这里问了。自去年以来，我一直在尝试在这里添加代码，但每次它都会给我错误。我知道其他人确实添加了代码，但我对这里严格的代码要求感到沮丧，所以我添加了 codepen 的链接。此外，它是在 Codepen 中现成的；从而方便观众更快地提供帮助。
这是您要找的吗？ codepen.io/chandrashekhar/pen/EQQoxb?editors=0110

标签： jquery css drop-down-menu navigation web

【解决方案1】：

您正在将display 属性切换为none 和block。在该元素上添加过渡无效。更好的方法是将height 属性从0 设置为your desired height（比如200px）。

尝试更改您的 CSS

@media (max-width :670px){

    .header-list {
    left: 0;
    top: 100%;
    right: 0;
    position:absolute;
    height:0px;
    width:100%;
    border:1px solid red;
    overflow:hidden;
    transition:all ease 0.5s;
    }
}

试试看

Link For Reference

【讨论】：

@Shmar，酷.. 快乐编码：D