自适应高度的过渡

合集 - 有意思的(95)

1.使用递归的方式实现数组、对象的深拷贝2023-08-30 2.js获取url的参数2023-09-04 3.弹框组件el-tree+vue3必坑指南2023-09-04 4.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-05 5.浏览器解析html2023-09-05 6.浏览器渲染HTML2023-09-05 7.Object.entries()2023-09-05 8.vue实现虚拟dom转换成真是dom的原理2023-09-05 9.全局封装组件处理并发请求不连续的loading2023-09-06 10.为什么vue数组下标修改监听不到2023-09-07 11.vue里表单验证的v-model.number的坑2023-09-08 12.有意思的css2023-09-09 13.js原生语音转文字2023-09-09 14.js手写一个call2023-10-14 15.js手写一个apply2023-10-14 16. 手写一个 bind 方法2023-10-14 17.js寄生组合式继承2023-10-14 18.react中的useState修改状态获取最新状态值2023-10-15 19.函数柯里化js2023-10-20 20.axios请求中断_下载中断和下载进度2023-10-20 21.axios请求重试_核心原理2023-10-20 22.axios请求重试_axios-retry插件2023-10-20 23.虚拟列表-渲染 10 万条数据2023-10-21 24.vue-office 组件2023-10-21 25.threejs2023-10-22 26.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-24 27.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-24 28.threejs基本函数2023-10-25 29.二分查找算法2023-10-26 30.js判断字符串是否连贯2023-10-26 31.世界坐标系和模型坐标系2023-10-28 32.设置车模型中每个小物体 castShadow = true2023-11-04 33.Vue3 echarts 组件化使用 resizeObserver2023-11-05 34.网页验证码的作用 *网页中几种常见验证码2023-11-07 35.多个装饰器一起es6装饰器2023-11-07 36.flex属性2023-11-07 37.移动端兼容问题2023-11-07 38.那什么是URL、URI、URN？2023-11-07 39.threejs的坐标渲染和着色2023-11-10 40.着色器2023-11-10 41.基于 three.js 加载器分别加载模型2023-11-10 42.echarts自适应大屏方案亲测有用2023-11-16 43.有趣的工具2023-11-17 44.关于threejs中鼠标左右移动，左动看右边，右动看左边2023-11-17 45.有趣的知识点threejs2023-11-18 46.uniapp底层跨端原理2023-11-22 47.防止XSS（跨站脚本攻击）漏洞2023-11-22 48.启动vite和electron项目配置多个主进程2023-11-23 49.margin-bottom:-1px无效的问题2023-11-24 50.九宫格css2023-11-24 51.css伪类选择器2023-11-24 52.uniapp关于uni.getUserProfile的使用2023-11-30 53.uniapp获取用户信息2023-12-04 54.在项目中使用UEditor碰到的几个问题2023-12-04 55.一维数组转二位数组2023-12-10 56.使用此函数对数组进行分块，并在最后一组添加特定的值2023-12-10 57.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本2023-12-11 58.阅读时间缓存（快应用）2023-12-28 59.uniapp中OnShow获取缓存2024-01-10 60.之前使用抖音的担保支付，后俩转换成通用的交易方式2024-01-11 61.width:100%与width:auto区别2024-01-15 62.leetcode1047字符串反复去重（栈）2024-01-15 63.由于<textarea>在某些平台上会创建一个原生控件，这可能会导致层级问题，尤其是在安卓设备上。在uni-app中，对于这种情况，通常推荐的解决方案是使用<cover-view>组件来覆盖原生组件，但是这种做法通常用于覆盖地图、视频等原生组件，而不是<textarea>2024-01-21 64.记录一次uniapp使用scrollview2024-01-22 65.微前端(矩阵项目)代码将单个文件合并到指定分支2024-01-22 66.推荐一个炫酷爆炸例子2024-01-24 67.思维导图推荐包2024-01-24

68.自适应高度的过渡2024-01-24

69.自定义滚动条边角2024-01-28 70.实现下划线动画2024-01-29 71.js不同类型比较2024-01-31 72.css2024-02-02 73.sse2024-02-18 74.ECMAScript 语言规范每年都会进行一次更新，而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前，ECMAScript 2024 的候选版本已经发布，为我们带来了一系列实用的新功能。2024-02-19 75.前端scale负数表示翻转2024-02-19 76.关于小说阅读前端翻页插件推荐turn.js2024-02-19 77.数组扁平化2024-02-19 78.Vue-Plugin-HiPrint2024-02-20 79.好玩的vue组件2024-02-20 80.DOMRect对象2024-02-20 81.js中关于return和if条件处理2024-02-20 82.关于文心一言不能打开F12开发者工具2024-02-20 83.js文字处理两端展示中间省略号2024-02-20 84.[popover, select] el-popover内有select的时候在选择后会自动关闭2024-02-20 85.说一下flex的属性2024-02-26 86.vue3中404路由匹配规则2024-02-26 87.shape-outside2024-02-27 88.createRange表示文档中的一个范围——用于js判断文字添加省略号情况2024-02-28 89.uniapp+vue3 使用list触底+下拉2024-03-11 90.diff算法vue2024-03-12 91.动态修改manifest.json2024-03-18 92.记录一下大小写导致的问题2024-03-20 93.微信小程序关于小说类使用官方阅读器2024-03-29 94.VS Code侧边栏的“资源管理器”丢了2024-04-12 95.nestjs中服务引入控制器和模块的作用2024-08-04

点击查看代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        margin: auto;
        overflow: hidden;
        background-color: palegreen;
        transition: 0.3s;
      }
      .box-item {
        line-height: 40px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <button class="operate-button">折叠</button>
    <button class="add-button">追加</button>
    <div class="box">
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
      <div class="box-item">this is a text this is a text</div>
    </div>

    <script>
      let operateButton = document.querySelector(".operate-button");
      let addButton = document.querySelector(".add-button");
      let box = document.querySelector(".box");
      let tag = false;
      //   监听过渡执行完毕
      box.addEventListener("transitionend", () => {
        console.log(tag);
        if (!tag) {
          box.style.removeProperty("height");
        }
      });
      operateButton.addEventListener("click", () => {
        if (tag) {
          box.style.height = "auto";
          const height = box.offsetHeight;
          box.style.height = 0;
          //下次重绘（下一帧）执行
          requestAnimationFrame(() => {
            box.style.height = height + "px";
          });
          operateButton.textContent = "折叠";
        } else {
          const height = box.offsetHeight;
          box.style.height = height + "px";
           //下次（下一帧）重绘执行
          requestAnimationFrame(() => {
            box.style.height = 0;
          });
          operateButton.textContent = "展开";
        }
        tag = !tag;
      });

      addButton.addEventListener("click", () => {
        const cloneLiItem = document.querySelector(".box-item").cloneNode(true);
        box.appendChild(cloneLiItem);
      });
    </script>
  </body>
</html>

posted @ 2024-01-24 17:30 jialiangzai 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 关于高度从0到auto的过渡效果

· 自定义导航栏交互(导航栏左上角按钮+滚动动画效果)

· easyui-textbox，高度自适应

· js - 封装文本域自适应高度

· 写一个高度从0到auto的transition动画

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

公告

昵称： jialiangzai
园龄： 3年10个月
粉丝： 10
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

JIA

光明神已陨落，现在由光明引领我

自适应高度的过渡

公告

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏