不执行简单的CSS转换

Question

演示

<a href="#">hover</a>
<p>Text here</p>

我希望<p>在<a>悬停时淡入并滑入。问题是，使用演示中的CSS，<p>只是"弹出"而不是动画。

Answer 1

transition简写不支持在同一位置有多个属性：

transition: max-height .5s ease, opacity .5s ease;

您还需要overflow: hidden使其看起来像是在滑动。更新的演示

Answer 2

您需要用逗号分隔要转换的属性：

p {
    opacity: 0;
    max-height: 0;
    transition: max-height .5s ease, opacity .5s ease;    
}

http://jsfiddle.net/pZngX/