如何通过动画扩展下拉列表？

Question

我自己创建了一个菜单。一切正常，而不是我想添加的一点动画，使它看起来更加平滑：

jQuery(document).ready(function () {
  jQuery(".menu-item-top").click(function (e) {
    jQuery(this).toggleClass("visible");
  });
});

#mobile_menu {
    display: block !important;
    min-height: 100vh;
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 999999;
    overflow: scroll;
    border-top: none;
    padding: 0 0 8px !important;
}

#mobile_menu li {
  list-style: none;
}

#mobile_menu.et_mobile_menu li a {
    padding: 12px 30px;
    margin: 0;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.et_mobile_menu ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
}

.et_mobile_menu .visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

.menu-item-top {
  background: #f9f9f9;
  color: #fff;
  padding: 12px 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="mobile_menu" class="et_mobile_menu">
    <li id="menu-item-199" class="menu-item menu-item-top"><a href="#" aria-current="page">Click to open</a>
        <ul class="sub-menu">
            <li id="menu-item-1424" class="menu-item"><a href="https://google.de" class="has-ripple">Google</a></li>
            <li id="menu-item-1426" class="menu-item"><a href="https://google.de" class="has-ripple">Google</a></li>
        </ul>
    </li>
</ul>

那么我怎样才能在<ul>下拉列表中制作动画？我想动画下来并用动画备份。我尝试了一些东西，但是我还不够好让它运转起来..你可以帮助我吗？

Answer 1

已经

您可以使用max-height属性进行动画制作

喜欢

.et_mobile_menu ul.sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease-in-out;
}

et_mobile_menu .visible > ul.sub-menu {
    max-height: 200px; /* adjust it according to drop-down size */
}