我有一个简单折叠菜单，使用jQuery和CSS事务显示子菜单。如下所示：
于飞：

<div class="container">
  <ul class="nk-menu list-unstyled" id="side-menu">
    <li class="nk-menu-item has-sub">
      <a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
        <span class="nk-menu-text">First</span>
      </a>
      <ul class="nk-menu-sub">
        <li class="nk-menu-item">
          <a class="nk-menu-link" href="">
            <span>Sub 1</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="nk-menu-item has-sub">
      <a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
        <span class="nk-menu-text">Second</span>
      </a>
    </li>
  </ul>
</div>

查询：

$(document).on('click', '.nk-menu-toggle', function(e) {
  e.preventDefault();
  let $this = $(this);
  if ($this.parent().hasClass('active')) {
    $this.parent().removeClass('active');
  } else {
    $('.nk-menu').find('li').removeClass('active');
    $this.closest('li').toggleClass('active');
  }
});

CSS：

.nk-menu-sub {
  border-top: 1px solid #2a4163;
  background: #8FBC8F;
  padding: 0px 15px;
  margin: 0 0 7px 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}

.active>.nk-menu-sub {
  height: 50px; // change this line to 100%
  opacity: 1;
  padding: 15px;
}

在行动中，这段代码已经真正与特定的大小一样50px为sub menu，但当我需要改变height为.active>.nk-menu-sub中的动态区域100%，css事务不工作，sub menu有一个延迟和滞后.
我该怎么解决这个问题？！
演示HERE