“过渡”不转换 ul 元素答案

【问题标题】："Transition" does not transform the ul element“过渡”不转换 ul 元素
【发布时间】：2016-11-30 16:52:50
【问题描述】：

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

不明白为什么带有“过渡”的动画不变换 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>

【问题讨论】：

我认为这是因为display 和/或position 属性正在改变.. 是您希望菜单向下滑动吗？
@Toby 是的，我希望它滑动...
在下面查看我的答案。

标签： html css transform transition

【解决方案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>

【讨论】：

现在我明白了问题所在 =) 非常感谢