CSS Grid fr单位实现height:auto动画实例页面

回到相关文章 »

效果：

代码：

CSS代码：

figure {
    display: grid;
    grid-template-rows: 0fr;
    transition: .25s;
    overflow: hidden;
}
figure img {
    min-height: 0;
}
.active + figure {
    grid-template-rows: 1fr;
}

HTML代码：

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