<html>
<head>
<style>
caption
{
background:#444;
color:white;
behavior:check;
}
caption + div
{
visibility:collapse;
height:0dip;
background-color:white;
color:white;
padding:4dip;
vertical-align:bottom;
transition: height 0.4s, background-color 0.4s, color 0.4s;
}
caption:checked
{
color:red;
}
caption:checked + div
{
visibility:visible;
height:min-content;
background-color:#EEE;
color:#000;
}
div:animating
{
visibility:visible; // while animating it still should be visible
overflow-y:hidden; // and clip content
}
</style>
<script type="text/tiscript"></script>
</head>
<body>
<h1>Extended transition property demo</h1>
<p>Animation from height:0 to height:min-content</p>
<div style="width:50%;margin:4dip *;" >
<caption>Click me!</caption>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>
</div>
<hr>
</body>
</html>
sciter 鼠标点击弹窗
最新推荐文章于 2024-04-24 09:46:53 发布