“Transition”不会转换ul元素

Question

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

无法理解为什么带有“过渡”的动画不会转换ul元素？我已经用 START ＆amp;的 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来实现这一目标。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;