html+css+js实现高度过渡效果

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      .container {
        position: relative;
      }
      .nav {
        width: fit-content;
        padding: 5px 10px;
        border-radius: 5px;
        background-color: orange;
        color: white;
        cursor: pointer;
      }
      .nav:hover {
        background-color: orangered;
      }
      .nav:hover ~ .content {
        height: var(--height--);
      }
      .content {
        position: absolute;
        top: 40px;
        width: 200px;
        height: 0;
        overflow: hidden;
        background-color: skyblue;
        transition: all 0.5s;
        border-radius: 5px;
      }
    style>
  head>
  <body>
    <div class="container">
      <div class="nav">下拉div>
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto praesentium sunt ea alias at
        cumque nostrum impedit eveniet, excepturi aliquid nesciunt ut. Nobis placeat excepturi
        sapiente, dolorem quia perferendis aspernatur? Veniam asperiores illo qui optio rem
      div>
    div>
    <script>
      const el = document.querySelector('.content'),
        height = el.scrollHeight;
      el.style.setProperty('--height--', height + 'px');
    script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

在这里插入图片描述

相关阅读:
Java8特性-Lambda表达式
毕业季限时“开业”，麓山南便利店送给毕业生满满的仪式感
开源项目分享：ChatGPT 控制台聊天应用
java毕业设计共享充电宝系统（附源码、数据库）
报错：“[Thread-0] INFO CoreNLP - CoreNLP Server is shutting down.”
应用场景丨迭代市政综合管廊监测系统建设
leetcode(力扣) 221. 最大正方形（动态规划）
Spring Cloud集成nacos配置中心
java File类基本概念基本构造方法使用
AWS认证SAA-C03每日一题

原文地址：https://blog.csdn.net/m0_46219714/article/details/133611558