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

在这里插入图片描述

相关阅读:
vue跨域proxy详解
【OpenCV 例程 300篇】245. 特征检测之 BRISK 算子
【408数据结构与算法】—排序（十四）
如何编写测试团队通用的Jmeter脚本
webpack配置css-loader让scss文件支持模块化引入
JNI的简单使用（Eclipse）
如何避免资源管理陷阱
Spring Boot学习笔记（1）
确保人工智能的公平性：生成无偏差综合数据的策略
C语言刷题系列——5.使用函数判断完全平方数

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