简单的CSS转换不会执行

Question

Demo

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

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

Answer 1

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

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

http://jsfiddle.net/pZngX/

Answer 2

transition简写在同一个地方不支持多个属性：

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

您还需要overflow: hidden才能让它看起来像是在滑动。 Updated demo