如何顺利扩展元素

Question

通过单击“ #sidebarnav>li ”：
1）它的第二个子元素- <ul>元素将展开，并且其类在"collapse"和"collapse in"之间切换

2） "#sidebarnav>li"获得“活动”类。

3） <a>和<ul>标记中的“ aria-expanded”属性变为“ true”

我想在单击其父元素时平滑地扩展ul元素，但无法实现。 试图添加过渡：类“ collapse in ”中height 500ms ease-in-out样式，但不起作用。 那么如何使其工作呢？ 把它放在小提琴上

<!--language: lang-html-->
<nav class="sidebar-nav">
    <ul class="in" id="sidebarnav">
        <li> 
           <a class="has-arrow waves-effect waves-dark" aria-expanded="false" href="#">
              <span class="hide-menu">Dashboard</span>
           </a>
           <ul class="collapse" aria-expanded="false">
            <li><a href="index.html">Minimal </a></li>
            <li><a href="index2.html">Analytical</a></li>
            <li><a href="index3.html">Demographical</a></li>
            <li><a href="index4.html">Modern</a></li>
         </ul>
       </li>
    </ul>
 </nav>

Answer 1

不幸的是，您无法使用百分比值来设置height动画，因此最好的方法是使用transform 。

如果需要“扩展”效果，则必须使用JavaScript。 这是使用transform ：

将ul放在容器中：

<div class="collapse-container">
  <ul class="collapse" aria-expanded="false">
    [...]
  </ul>
</div>

隐藏容器上的溢出，以便ul不重叠：

.collapse-container {
  overflow: hidden;
}

在.in上对translateY进行动画处理：

.collapse {
  transition: transform 250ms ease-in-out;
  transform: translateY(-100%);
}

.collapse.in {
  transform: translateY(0%);
}

这是一个正在工作的小提琴。 （我更改了JS以使其与容器元素一起使用）