【日常记录】【CSS】css 和 js 实现高度的动画效果，常用于下拉菜单，下拉选项要做动画处理

嘤嘤怪呆呆狗

于 2024-07-17 13:07:23 发布

阅读量1.1k

点赞数 18

分类专栏： css 文章标签： css javascript 前端 vue html5 vue.js html

本文链接：https://blog.csdn.net/qq_45634593/article/details/140463103

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

0. 引言

在下拉菜单的时候，很常见鼠标移入，下面的下拉项缓慢的出来，一个动画效果
还有 elementUI的选择器组件等其他组件

1. 界面结构搭建

<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .item_title {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      border-radius: 5px;
      ;
      padding: 5px;
      text-align: center;
      cursor: pointer;
    }

    .dropdown-menu {
      margin-top: 5px;

      background-color: #409eff;
    }

    .container {
      margin: auto;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item">
      <div class="item_title">下拉菜单</div>
      <div class="dropdown-menu">
        <div class="dropdown-item">1</div>
        <div class="dropdown-item">2</div>
        <div class="dropdown-item">3</div>
      </div>
    </div>
  </div>

</body>

</html>

在这里插入图片描述

2. 第一种方式：使用 height

最常见的方法是，先让下拉菜单的盒子 高度变成 0，然后添加 overflow:hidden ，让溢出的元素隐藏，当鼠标移入 下拉菜单这个按钮的时候，把高度变成固定值

在这里插入图片描述

    .dropdown-menu {
      margin-top: 5px;

      background-color: #409eff;

      height: 0px;
      overflow: hidden;
      transition: all .5s;
    }

    .item:hover .dropdown-menu {
      height: 100px;
    }

但这个方法有一个弊端，有时候高度并不能直接确定，谁也不知道里面的内容有多少东西！

那假设，我们把这个 height 属性的值，换成 auto 它就不能实现动画了
因为这个高度是不确定的，浏览器无法对不确定的高度实现动画

    .item:hover .dropdown-menu {
      height: auto;
    }

在这里插入图片描述

3. 第二种方式：使用 max-height

可以给 max-height 做动画，只要保证你的内容不会超过这个数就可以

    .dropdown-menu {
      margin-top: 5px;

      background-color: #409eff;

      max-height: 0px;
      overflow: hidden;
      transition: all 1s;
    }

    .item:hover .dropdown-menu {
      max-height: 1000px;
    }

这个地方，会导入，

鼠标移入的时候，会感觉很快
鼠标移出的时候，会感觉有点卡

因为，鼠标移入的时候，动画过程实际上是 0px => 1000px 又加上移出隐藏了，所以会感觉很快

因为，鼠标移出的时候，动画过程实际上是 1000px => 0px 又加上溢出隐藏了，所以会感觉有一点卡顿

在这里插入图片描述

4. 第三种方式：使用 transform

可以使用 transform 的 scaleY ，让它从Y轴 上本来是 0 ，然后到 1 变化

在这里插入图片描述

但这个地方，会发现有点奇怪，这个地方，是因为默认的变换原点就是 DOM 元素的中心（垂直水平居中的点）
可以通过 transform-origin: top center; 修改，把变换原点改成垂直方向的顶部，水平方向的中心

在这里插入图片描述

5. 第五种方式：使用JS

<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .item_title {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      border-radius: 5px;
      padding: 5px;
      text-align: center;
      cursor: pointer;
    }

    .dropdown-menu {
      margin-top: 5px;

      background-color: #409eff;
      height: 0;
      overflow: hidden;
    }

    .container {
      margin: auto;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item">
      <div class="item_title">下拉菜单</div>
      <div class="dropdown-menu">
        <div class="dropdown-item">1</div>
        <div class="dropdown-item">2</div>
        <div class="dropdown-item">3</div>
      </div>
    </div>
  </div>
  <script>
    let itemTitleEl = document.querySelector('.item_title')
    let dropdownMenuEl = document.querySelector('.dropdown-menu')
    itemTitleEl.addEventListener("mouseenter", function () {
      dropdownMenuEl.style.height = 'auto'

      const { height } = dropdownMenuEl.getBoundingClientRect()
      dropdownMenuEl.style.height = 0
      console.log("mousenter", height)


      dropdownMenuEl.style.transition = 'all 1s'
      dropdownMenuEl.style.height = height + 'px'
    })
    itemTitleEl.addEventListener("mouseleave", function () {
      dropdownMenuEl.style.height = 0
    })
  </script>
</body>

</html>

这个实现思路就是：

监听鼠标移入下拉菜单按钮(document.querySelector('.item_title'))事件
鼠标移入后，把下拉菜单（document.querySelector('.dropdown-menu')） height 换成 auto ，目的是为了拿到这个下拉菜单DOM的高度
使用 DOM.getBoundingClientRect() ，拿到这个下拉菜单DOM的高度
给 下拉菜单高度设置成拿到的实际值
给 下拉菜单 添加 transition
鼠标移出，高度变成 0

在这里插入图片描述

可以看到鼠标移入以后是直接闪一下的，根本没有做动画，这个原因是因为：先设置了高度是 auto，然后设置高度为 0 ，然后又设置高度为 具体值，，，修改高度，会触发 回流(Layout)，

但是浏览器为了避免，连续多次操作导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后在进行统一计算，所以，回流这个操作，导致布局树发生计算是异步的

所以如若想让它立即执行回流，则需要获取布局属性，让浏览器立即执行回流，因为获取布局属性相关的信息，需要计算，所以可以触发浏览器立即执行回流

比如以下属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这里可以采用 DOM.getBoundingClientRect() 也会立即触发回流，强制浏览器重新计算布局，确保它检测到高度变化

最终代码

在这里插入图片描述

  <script>
    let itemTitleEl = document.querySelector('.item_title')
    let dropdownMenuEl = document.querySelector('.dropdown-menu')
    itemTitleEl.addEventListener("mouseenter", function () {
      dropdownMenuEl.style.height = 'auto'

      const { height } = dropdownMenuEl.getBoundingClientRect()
      dropdownMenuEl.style.height = 0
      console.log("mousenter", height)

      dropdownMenuEl.getBoundingClientRect() // 强制浏览器重新计算布局，确保它检测到高度变化
      dropdownMenuEl.style.transition = 'all 1s'
      dropdownMenuEl.style.height = height + 'px'
    })
    itemTitleEl.addEventListener("mouseleave", function () {
      dropdownMenuEl.style.height = 0
    })
  </script>