不定高度元素实现高度自适应动画

最新推荐文章于 2023-09-14 08:45:00 发布

落落叶叶无声

最新推荐文章于 2023-09-14 08:45:00 发布

阅读量1.4k

点赞数

分类专栏： HTML & CSS 文章标签： css动画高度动画不定高度元素

本文链接：https://blog.csdn.net/u012557814/article/details/112916757

版权

HTML & CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

问题

如果元素高度确定情况下，实现动画并不是什么难事。但是如果是不定高度的元素呢？
可能很多人第一反应是，给元素加个：

height: auto

可惜的是，这并不会起作用。

用 max-height 代替 height

思路：

先将需要做动画的元素设置 max-height: 0px，overflow: hidden;
在事件中给元素添加 max-height: 固定高度（>= 元素的实际高度）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    main {
      height: fit-content;
      transition: max-height .8s;
      max-height: 0;
      overflow: hidden;
      background: #eee;
    }
  </style>
</head>
<body>
  <div>
    <header onclick="showMain(this)">点击动画显示 main</header>
    <main>
      <p>这是main内容第一段</p>
      <p>这是main内容第二段</p>
      <p>这是main内容第三段</p>
    </main>
  </div>
  <script>
    function showMain(el) {
      // 300px >= main 元素的高度
      el.nextElementSibling.style.setProperty('max-height', '300px')
    } 
  </script>
</body>
</html>

落落叶叶无声

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
不定高度元素实现高度自适应动画

问题如果元素高度确定情况下，实现动画并不是什么难事。但是如果是不定高度的元素呢？可能很多人第一反应是，给元素加个：height: auto可惜的是，这并不会起作用。用 max-height 代替 height思路：先将需要做动画的元素设置 max-height: 0px，overflow: hidden;在事件中给元素添加 max-height: 固定高度（>= 元素的实际高度）<!DOCTYPE html><html lang="en"><
复制链接

扫一扫