时间戳

首页 > 解决方案 > 如何平滑展开元素

javascript - 如何平滑展开元素

问题描述

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

2）"#sidebarnav>li"获得“活跃”课程。

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

我想在单击其父元素时平滑地扩展 ul 元素，但我无法实现。尝试将 transition: height 500ms ease-in-outstyle 添加到类“ collapse in”但不起作用。那么如何让它发挥作用呢？在Fiddle上查看

<!--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>

标签： javascriptjquerycss

解决方案

不幸的是，您不能height使用百分比值制作动画，因此您能做的最好的事情就是使用transform.

如果您需要“扩展”效果，您将不得不求助于使用 JavaScript。以下是使用方法transform：

ul在容器中包围：

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

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

.collapse-container {
  overflow: hidden;
}

动画translateYon .in：

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

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

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

推荐阅读