css中width:auto的transition过渡

仙女叔叔

已于 2022-01-20 18:04:36 修改

阅读量1.2k

点赞数

文章标签： css css3 前端

于 2022-01-20 18:03:18 首次发布

本文链接：https://blog.csdn.net/qq_52070860/article/details/122606665

版权

遇到个问题，利用css的transition过渡做折叠时，height为auto导致过渡不生效！

这里我们用scrollHeight去获取并设置div的高度去解决问题，首先我们先来看一下scrollHeight属性

scrollHeight

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  #deom {
    overflow: hidden;
    height: auto;
    background: darkgoldenrod;
    transition: height 0.5s;
    padding: 3px;
    margin: 4px;
  }
</style>

<body>
  <button onclick="getScrollHeight()">过渡</button>
  <div id="deom">
    <ul>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
    </ul>
  </div>
</body>
<script>
  function getScrollHeight() {
    let div = document.getElementById("deom");
    let height = div.scrollHeight;
    console.log(height, typeof (height));
  }
</script>

</html>

看下控制台的输出：

输出的是162，而且是数字类型，但是我们在控制台来看下div的整体高度；

高度只有156px，但是输出的scrollHeight为162，这里可以看出scrollHeight = height + padding;

解决方案：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  #deom {
    overflow: hidden;
    height: 0;
    background: darkgoldenrod;
    transition: height 0.5s;
    /* padding: 3px;
    margin: 4px; */
  }
</style>

<body>
  <button onclick="getScrollHeight()">过渡</button>
  <div id="deom">
    <ul>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
      <li>ssssss</li>
    </ul>
  </div>
</body>
<script>
  function getScrollHeight() {
    let div = document.getElementById("deom");
    let height = div.scrollHeight.toString() + "px";
    if (div.style.height === height) {
      div.style.height = 0;
    } else {
      div.style.height = height;
    }
  }
</script>

</html>

其实就相当于我们用scrollHeight的高度代替了auto的自适应内容的高度，如果是在Vue项目中写，可以在mouted(挂在完成前)去获取scrollHeight并设置div高度

仙女叔叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中width:auto的transition过渡

遇到个问题，利用css的transition过渡做折叠时，height为auto导致过渡不生效！这里我们用scrollHeight去获取并设置div的高度去解决问题，首先我们先来看一下scrollHeight属性scrollHeight<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head>
复制链接

扫一扫