javascript 使div大小适合内容而不丢失过渡动画

v8wbuo2f 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(130)

我的目标是DIV的大小（高度）将根据DIV上的文本进行调整（同时保持最小高度）。
但如果用户将鼠标移到DIV上，DIV会正确地改变其高度，而不会失去过渡的优美效果
如果我将height: fit-content;更改为固定大小，假设为height: 100px;，过渡动画工作，但div高度不一定与DIV上的文本匹配。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border-style: solid;
  border-width: 1px;
  width: 200px;
  height: fit-content;
  min-height: 50px;
  background-color: #0000ff;
 transition: 0.5s;
}

div:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 300px;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis</div>

</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75314011/make-div-size-fit-content-without-losing-transition-animation

2条答案

按热度按时间

tmb3ates1#

我相信您可以通过使用min-height来处理这种情况。请参见下面的代码片段：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-style: solid;
        border-width: 1px;
        width: 200px;
        min-height: 50px;
        background-color: #0000ff;
        transition: 0.5s;
      }

      div:hover {
        background-color: #ffcccc;
        width: 200px;
        min-height: 300px;
      }
    </style>
  </head>
  <body>
    <div>Lorem ipsum dolor sit amet</div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt
      justo rutrum tellus congue convallis Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue
      convallis
    </div>
  </body>
</html>

如果元素的高度不固定并且需要过渡，则应使用min-hegith或max-height。

赞(0）回复(0）举报 2023-02-02

3ks5zfa02#

你可以动画填充而不是高度，你可以保持漂亮的动画：）

div:hover {
  background-color: #ffcccc;
  padding-bottom: 100px;
}

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 使div大小适合内容而不丢失过渡动画

2条答案

相关问题

热门标签

最新问答