html - "Transition"不转换 ul 元素

Question

这是一个简单的下拉菜单。

无法理解为什么带有“transition”的动画不转换 ul 元素？我用START & END 隔离了代码中的问题。

开始时 ul 有 translateY(-2em)，悬停时有 translateY(0%)

html {
  background: #EEEEEE;
}
.container {
  background: white;
  margin: 5% auto 0 auto;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul li {
  display: inline-block;
  padding: 15px;
  position: relative;
}
/*
////////////
////START///
////////////
*/

.menu ul li ul {
  display: none;
  transform: translateY(-2em);
  /* Why transition does not work? */
  transition: transform 300ms ease-in-out 0s;
}
.menu ul li:hover ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  background: white;
  margin-top: 15px;
  width: 100%;
  left: 0;
  transform: translateY(0%)
}
/*
////////////
////END/////
////////////
*/

.menu ul li:hover ul li:hover {
  background: #EEEEEE;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>One
      </li>
      <li>Hover
        <ul ">
              <li>0</li>
              <li>0</li>
              <li>0</li>
              <li>0</li>
              <li>0</li>
            </ul>
          </li>

          <li>Three</li>
        </ul>
      </div>
    </div>

Answer 1

这并不漂亮，但它表明是 display 和 position 属性发生了变化，阻止了转换的工作。

最常见的是使用 max-height、opacity 和/或 visibility 来实现。

html {
  background: #EEEEEE;
}
.container {
  background: white;
  margin: 5% auto 0 auto;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul li {
  display: inline-block;
  padding: 15px;
  position: relative;
}
/*
////////////
////START///
////////////
*/

.menu ul li ul {
  transform: translateY(-2em);
  /* Why transition does not work? */
  transition: all 300ms ease-in-out;
}
.menu ul li:hover ul {
  background: white;
  margin-top: 15px;
  width: 100%;
  left: 0;
  transform: translateY(0%)
}
/*
////////////
////END/////
////////////
*/

.menu ul li:hover ul li:hover {
  background: #EEEEEE;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>One
      </li>
      <li>Hover
        <ul ">
              <li>0</li>
              <li>0</li>
              <li>0</li>
              <li>0</li>
              <li>0</li>
            </ul>
          </li>

          <li>Three</li>
        </ul>
      </div>
    </div>