html - 如何减慢悬停在滚动条上的效果？

Question

我为 div (#test) 制作了一个滚动条。这是我的 CSS 代码:

#test {
  overflow: hidden; 
  max-height: 100vh; 
  width: 150px;
  transition: overflow-y 1s linear;
}
#test:hover {
  overflow-y: auto; 
  max-height: 100vh; 
  width: 150px;
}

它从溢出隐藏正确地变为溢出自动，但我希望这种效果慢慢出现。怎么做？我读了一些带有过渡的东西，但它对我不起作用。

Answer 1

无法使用 css 转换或动画为溢出属性设置动画，因为没有用于插入的 hidden 和 auto 的中间状态。

但是，通过将 overflow 属性设置为固定值并使用宽度和高度等可动画属性可能会达到您想要的效果，如下所示:

.foo {
  width: 100px;
  height: 100px;
  background-color: #79a7a7;
  transition: all 1s ease;
}

.foo:hover {
  width: 120px;
  height: 120px;
  background-color: #99e7e7;
}

<div class="foo">
hover me
</div>