transition动画可以实现结果，过渡无法实现

Question

transition: 0.5s ease-in-out;
我想实现的就是：hover后，content块显示出来，并且置顶，content块的宽度可以由200扩宽为300.最终的结果可以实现，但是过渡无法实现，就是0.5s ease-in-out无法实现
下面是我的这方面的代码：

.content {
    display: none;
    background-color: #4bae41;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    position: absolute;
    width: 200px;
}
li:hover .content {
    display: block;
    width: 300px;
    top: 1px;
}

想实现的就是这样的

Answer 1

transition的第一个参数应该为需要过渡的属性名，或是all。

补充：
除了transition参数问题以外，display这里会导致过渡失效。
可以参考一下这个例子https://jsfiddle.net/ps4qdgkg/
我上面用的visibility属性进行隐藏显示

Answer 2

乍一看是因为前后使用了display: none; 到 display: block;的更改使得动画失效。
解决办法要么将显示(none -> block)与动画(200px -> 300px)两步分开并延迟，要么避免display: none;
望有帮助。