Question

嘿，我有一个＆＃34;扰流板＆＃34;应该是动画和可滚动的。唯一的问题是滚动条只应在转换后显示。

示例代码：

＆＃13;

#spoiler{
  font-size:50px; 
  max-height:0px; 
  overflow:hidden; 
  transition:3s;
}
input#SpoilerBox:checked ~ #spoiler{
  max-height:200px; 
  overflow:auto
}

＆＃13;

<!DOCTYPE html>

<html>
  <head>
   <title>Spoiler</title>
  </head>

     <body>
       <input type="checkbox" id="SpoilerBox"/><label for="SpoilerBox">Spoiler</label>

       <div id="spoiler">
         Text<br>
         to spoiler
        </div>
      </body>
</html>

＆＃13;

Answer 1

有点棘手-我添加了包装器元素，并使用css select STATUSIN,STATUSOUT,case when CAST(STATUSIN as time) > CAST('08:00' as time) then DATEDIFF(MINUTE,CAST('08:00' as time),CAST(STATUSIN as time)) end as LATECOME from test;。另外，我将@keyframes更改为max-height，因为它适合剪切区域

100px

#spoiler{
  font-size:50px; 
  overflow:auto; 
  height:0; 
  transition: height 3s;
}
#spoiler-wrapper {
  overflow: hidden;
  height:100%;
}
input#SpoilerBox:checked ~ #spoiler {
  height: 100px;
}
input#SpoilerBox:checked ~ #spoiler #spoiler-wrapper{
  height:auto; 
  animation: grow 3s;
}
@keyframes grow {
  from {height:0px;}
  to {height: 100px;}
}
@keyframes shrink {
  from {height:100px;}
  to {height: 0px;}
}

CSS更改溢出延迟

1 个答案: