css - 简单的 CSS 过渡不执行

Question

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

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

transition速记不支持在同一个地方有多个属性：

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

你还需要overflow: hidden让它看起来像在滑动。更新的演示

2 回答 2