前端如何实现高度的自动过渡

最新推荐文章于 2025-05-18 03:42:29 发布

先树立一个小目标

最新推荐文章于 2025-05-18 03:42:29 发布

阅读量526

点赞数 9

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/ice_cream__/article/details/136478481

版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何利用HTML、CSS和JavaScript在鼠标悬停时改变`<div>`元素的高度，通过控制`height`属性和`transition`效果，避免了页面闪烁，展示了浏览器渲染机制的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是利用了浏览器的渲染机制。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .content {
        background: blue;
        width: 200px;
        overflow: hidden;
        height: 0;
      }

    </style>
  </head>
  <body>
    <span class="btn">
      测试
    </span>

    <div class="content">
      <p>111111111111</p>
      <p>222222222222</p>
      <p>222222222222</p>
      <p>222222222222</p>
      <p>222222222222</p>
      <p>222222222222</p>
      <p>222222222222</p>
      <p>222222222222</p>
      <p>222222222222</p>
    </div>
    <script>
      const btn = document.querySelector('.btn');
      const content = document.querySelector('.content')
      btn.onmouseenter = function () {
        content.style.height = 'auto';
        const {height} = content.getBoundingClientRect();
        console.log(height);
        //有回流，但是没有绘制，所以不会闪一下，界面看不出变化，但是拿到了高度
        content.style.height = 0;
        //不加content.offsetHeight，默认是直接渲染height + 'px'，不会出现从0->height的动画
        content.style.transition = 'height 0.5s';
        //读取几何属性会造成强制回流，从而触发渲染
        content.offsetHeight;
        content.style.height = height + 'px';
      }
      btn.onmouseleave = function () {
        content.style.height = 0;
      }
    </script>
  </body>
</html>