CSS calc-size()实现height:auto动画实例页面

回到相关文章 »

效果：

代码：

CSS代码：

p {
    height: 0;
    transition: height .25s;
    overflow: hidden;
}
.active + p {
    height: auto;
    height: calc-size(auto, size);
}

HTML代码：

<button onClick="this.classList.toggle('active');">点击我</button>
<p>
    <img src="html-book.jpeg" width="256" />
</p>