Question

动画就像菜单缓慢滑动或者甚至消失。

我更喜欢通过CSS3或jQuery。我尝试在toggleClass中使用持续时间，并在open类中进行过渡，但似乎没有效果。

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

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

Answer 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

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

1 个答案: