css - 如何在 div 上应用变换和过渡效果

Question

我正在 an example i found 上练习 css 。我尝试用过渡效果显示导航上方的子菜单。我可以更改悬停时子菜单的位置:

nav li:hover .menu-sub {
  display: block;
  transform: translateY(-100%);
}

我还修改了代码，添加了过渡效果:

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  display: none;
  color: #fff;
  padding: 2em;
  -webkit-transition: -webkit-transform 1.5s ease;
    -moz-transition: -moz-transform 1.5s ease;
    -o-transition: -o-transform 1.5s ease;
    transition: transform 1.5s ease;
}

位置改变了，但我根本看不到任何过渡效果。我做错了什么？

Answer 1

请将转场修改为如下所示，写错了。

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  opacity:0;
  overflow:hidden;
  box-sizing:border-box;
  height:0px;
  color: #fff;
  -webkit-transition: opacity 1.5s ease-out;
    -moz-transition: opacity 1.5s ease-out;
    -o-transition: opacity 1.5s ease-out;
    transition: opacity 1.5s ease-out;
}

过渡不适用于显示，而是使用以下效果。

Codepen Demo

我们可以将 height 从 0px 切换到 auto(全高)，并将 opacity 从 0(不可见)到 1(可见)。您可以看到，我们只能在不透明度上看到动画，这样会产生最佳效果。