如何在div上应用转换和转换效果

Question

我在an example i found上练习css。我试图用转换效果来显示nav上方的子菜单。我可以改变的子菜单的位置上徘徊：

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

过渡不display工作，而是使用下面的效果。

Codepen Demo

如果我们可以从 0（不可见），以 1（可见）切换 height从 0px到 auto（全高）和 opacity。你可以看到我们只看到 opacity上的动画，这会产生最好的效果。

Answer 2

使用visibility:hidden然后visible

display: none禁用它在有源DOM和与该CSS这样的元件不能被选择用于如动画的东西。

.menu-sub { 
    position: absolute; 
    left: 0; 
    background: #444; 
    width: 100%; 
    visibility: hidden; 
    color: #fff; 
    padding: 2em; 
    transition: transform 1.5s ease; 
} 
nav li:hover .menu-sub { 
    visibility: visible; 
    transform: translateY(-100%); 
}