Doctype HTML 停止平滑的 div 扩展

Question

所以我在 div 中有一个菜单。该 div 在单击时展开。它有 1 秒的过渡缓动。它在文档中没有 的情况下工作得很好。添加 会停止平滑过渡（但仍会打开和关闭）。

我觉得这真是愚蠢的事情。

这是正文代码：

<nav class="navigation">
<ul class="mainmenu">
<li><a href="javascript:;" onclick="showSubMenu(event)" class="TOCexpand">BIG TITLE</a>
<ul class="submenu">
<li class="bookchapter">
OPTION
<br>
<a class="booklink" href="">

</a></li>

</ul>
</li>
</ul>
</nav>
 
<script>
function showSubMenu(e) {
e.target.parentNode.classList.toggle('active');
}
</script>

这是 CSS。

.navigation {
    width: 100%;
    text-align: center;
    margin-bottom:25px;
}

.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mainmenu a {
    display: block;
}

.mainmenu li.active .submenu {
    display: block;
    max-height: 100%;
}

a.TOCexpand {
    font-family: 'norseregular';
    font-weight: normal;
    font-style: normal;
    color: #e53f3f;
    font-size: 300%;
    text-shadow: 2px 4px 0px #000;
    letter-spacing: 5px;
}

.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 1.00s ease-out;
-moz-transition: all 1.00s ease-out;
-o-transition: all 1.00s ease-out;
-ms-transition: all 1.00s ease-out;
font-family: 'norseregular';
font-weight: normal;
font-style: normal;
}

li.book {
    font-family: 'Noto Serif';
    font-size: 200%;
    margin-top: 25px;
}

li.bookchapter {
    font-family: 'Noto Serif';
    font-size: 200%;
}

a.booklink {
    font-family: 'norseregular';
    font-weight: normal;
    font-style: normal;
    margin-bottom: 33px;
    margin-top: 5px;
    letter-spacing: 5px;
    font-size: 90%;
}

我意识到这是文档类型。删除它就可以了。添加回去会导致它无法正常工作。

Answer 1

当前最好的方法是使用 Kevin Powell

的一点魔法

您需要将

<ul class="submenu">

包裹在

<div class="magic">

中（我称该类为

magic

，因为这就是魔法发生的地方）

接下来，您将修改 CSS 为

.magic {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s ease-out;
}

.magic .submenu {
  overflow: hidden;
  font-family: "norseregular";
  font-weight: normal;
  font-style: normal;
  background:yellow;
}
.mainmenu li.active .magic {
  grid-template-rows: 1fr;
}

应该就是这样了

注意：有一种不太“hacky”的方法可以做到这一点，但它目前仅适用于基于 Chromium 的浏览器，使用

calc-size

CSS 函数 - 如此 Web Dev Simplified 视频

所示

function showSubMenu(e) {
    e.target.parentNode.classList.toggle('active');
  }

.navigation {
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
}

.mainmenu,
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainmenu a {
  display: block;
}

a.TOCexpand {
  font-family: "norseregular";
  font-weight: normal;
  font-style: normal;
  color: #e53f3f;
  font-size: 300%;
  text-shadow: 2px 4px 0px #000;
  letter-spacing: 5px;
}

.magic {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s ease-out;
}

.magic .submenu {
  overflow: hidden;
  font-family: "norseregular";
  font-weight: normal;
  font-style: normal;
  background:yellow;
}
.mainmenu li.active .magic {
  grid-template-rows: 1fr;
}

li.bookchapter {
  font-family: "Noto Serif";
  font-size: 200%;
}

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="javascript:;" onclick="showSubMenu(event)" class="TOCexpand">BIG TITLE</a>
      <div class="magic">
        <ul class="submenu">
          <li class="bookchapter">
            OPTION
            <br>
          </li>
          <li class="bookchapter">
            OPTION
            <br>
          </li>

        </ul>
      </div>
    </li>
  </ul>
</nav>