过渡属性 height 设置 auto 不起作用

transition 在过渡时 无法将 auto 转换为 px,所以设置必须是具体数值,否则没有过渡效果

解决办法

操作 dom 对具体的数值进行转换

<div class="card-detail" v-for="(item, index) in 2" :key="index"><div class="card-head"><div class="i-flex"><div class="card-name">我是套餐名称我是套餐名称看不见我</div><span>卡类型</span></div></div><divclass="card-content"ref="cardRef":style="{ height: expandIndex === index ? autoHeight : '60px' }"><div>项目1</div><div>项目2</div><div>项目3</div><div>项目4</div><span class="expand" @click="expandHandle(index)">{{expandIndex === index ? '收起' : '展开'}}</span></div></div>
const expandIndex = ref(-1)
const cardRef = ref(null)
const autoHeight = ref('auto')
const expandHandle = (index) => {if (expandIndex.value === index) {expandIndex.value = -1} else {expandIndex.value = indexautoHeight.value = cardRef.value[index].scrollHeight + 'px'}
}
.card-detail {position: relative;padding: 20px;margin: 10px 0;border: 1px solid #ccc;.card-head {.card-name {max-width: 220px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}.card-content {overflow: hidden;transition: height 0.3s linear;}.expand {position: absolute;width: 90%;text-align: center;bottom: 5px;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/23427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

15.FreeRTOS 消息缓存 Message Buffer

FreeRTOS 消息缓存&#xff08;Message Buffer&#xff09;的使用 介绍 在实时操作系统&#xff08;RTOS&#xff09;中&#xff0c;任务之间的通信是一个非常重要的方面。FreeRTOS 提供了多种机制来实现任务间通信&#xff0c;其中之一就是消息缓存&#xff08;Message Buffe…

大数据之CDH对Hdfs做Balance数据均衡/数据平衡/数据倾斜

问题的来源: 由于在hive工具运行sql,出现sql卡顿的情况,去cdh上查看yarn资源的分布情况,发现了整个cdh平台中hdfs和yarn资源分布不均匀,大量的爆红显示: 以下 DataNode 数据目录 位于小于其可用空间 10.0 吉字节 的文件系统中。 /data1/dfs/dn&#xff08;可用&#xff1a;7.2 …

C++的类和new和delete和菱形继承机制

文章目录 参考虚函数使用虚函数的class结构相关实现源码IDA反编译子类虚表和父类虚表调用函数菱形继承 参考 https://showlinkroom.me/2017/08/21/C-%E9%80%86%E5%90%91%E5%88%86%E6%9E%90/ https://www.cnblogs.com/bonelee/p/17299985.html https://xz.aliyun.com/t/5242?t…

hadoop疑难问题解决_NoClassDefFoundError: org/apache/hadoop/fs/adl/AdlFileSystem

1、问题描述 impala执行查询&#xff1a;select * from stmta_raw limit 10; 报错信息如下&#xff1a; Query: select * from sfmta_raw limit 10 Query submitted at: 2018-04-11 14:46:29 (Coordinator: http://mrj001:25000) ERROR: AnalysisException: Failed to load …

Go GORM中的迁移系统,实现自动迁移与手动迁移

在Golang生态系统中&#xff0c;GORM作为一个广泛使用的ORM框架&#xff0c;不仅在数据库操作方面提供了友好的API支持&#xff0c;其迁移系统&#xff08;Migration System&#xff09;同样功能强大且易于使用。在本文中&#xff0c;我们将详细解析GORM中的迁移机制&#xff0…

Linux进程无法被kill

说明&#xff1a;记录一次应用进程无法被kill的错误&#xff1b; 场景 在一次导出MySQL数据时&#xff0c;使用下面的命令&#xff0c;将数据库数据导出为.sql文件&#xff0c;数据量大&#xff0c;导出时间长&#xff0c;于是我就将服务器重启了。 mysqldump -u username -…

springboot大学生就业管理系统-计算机毕业设计源码89344

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对大学生就业管理系统等问题&#xff0c;对大…

vs中C++项目中没有QT(.pro)文件怎么生成翻译ts文件

目录 使用 CMake 生成翻译文件 1.创建 CMakeLists.txt 文件 2.添加翻译生成规则 3.运行 CMake 4.生成翻译文件 使用命令行工具生成翻译文件 1.运行 lupdate 2.编辑 .ts 文件 3.运行 lrelease 网络上说的情况都是一个qt程序在VS中打开&#xff0c;拥有.pro文件的情况&a…

贪心策略:FatMouse‘ Trade

题目 题目描述 FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the warehousecontaining his favorite food, JavaBean.The warehouse has N rooms. The i-th room contains Jfipounds of JavaBeans and requires F[i] pounds of cat food. …

提高篇(七):Processing与物联网的结合:如何创建智能互动艺术装置

提高篇(七):Processing与物联网的结合:如何创建智能互动艺术装置 引言 物联网(IoT)技术的兴起为艺术创作带来了新的可能性,通过将智能设备与艺术作品相结合,艺术家可以创建出互动性更强、响应更加智能的装置。在这篇文章中,我们将探讨如何利用Processing与物联网技术…

C++ 11【右值引用】

&#x1f493;博主CSDN主页:麻辣韭菜&#x1f493;   ⏩专栏分类&#xff1a;C修炼之路⏪   &#x1f69a;代码仓库:C高阶&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C知识   &#x1f51d;&#x1f51d; 1.C 11 简介 目录 1.C 11 简介 2. 统一的列表…

Vue3【四】使用Vue2的写法写一个新的组件子组件和根组件

Vue3【四】使用Vue2的写法写一个新的组件 Vue3【四】使用Vue2的写法写一个新的组件 Vue3是向下兼容的&#xff0c;所有可以使用Vue的选项式写法 运行截图 目录结构 文件源码 App.vue <template><div class"app"><h1>你好世界! 我是App根组件<…

数据分析常用模型合集(二)RARRA模型、RFM模型

随着互联网的发展&#xff0c;前期平台的砸钱拉新、抢占市场&#xff0c;大家都叫AARRR小甜甜&#xff1b; 现在市场基本抢占得差不多&#xff0c;形成了一个平衡&#xff0c;新人基本拉不到多少&#xff0c;用户都知道干什么事有哪些平台&#xff0c;比如买东西主流淘宝、京东…

动态IP基础解析:为什么我们需要它?

在深入探讨互联网世界的运作机制时&#xff0c;IP地址无疑是其核心要素之一。IP地址&#xff0c;作为网络设备的唯一标识&#xff0c;不仅确保了数据的准确传输&#xff0c;更是网络安全和管理的基石。本文将深入解析动态IP的基础知识&#xff0c;并探讨其重要性及在多种场景下…

Go_context包

是什么?为什么? context时goroutine之间传递上下文消息&#xff0c;包括信号取消&#xff0c;储存数据。 为什么&#xff1f; Go通常写后端服务&#xff0c;启动一个HTTP请求会启动多个goroutine&#xff0c;可以共享token数据。 或者处理时间长&#xff0c;通过停止信号关联…

大语言模型应用与传统程序的不同

大语言模型&#xff08;LLM&#xff09; 被描述的神乎其神&#xff0c;无所不能&#xff0c;其实&#xff0c;大语言模型只是一个模型&#xff0c;它能够理解和生成自然语言&#xff0c;唯有依靠应用程序才能够发挥作用。例如&#xff0c;基于大模型可以构建一个最简单的会话机…

安装jdk-8u411-windows-x64.exe,点击下一步不出安装界面

微信输入法的坑。点击下一步&#xff0c;安装界面消失&#xff0c;没有任何提示。 之前把默认微软拼音输入法删除了。免得多个输入法来回切换 谁能想到是微信输入法的事 切换为微软输入法&#xff0c;再安装jdk-8u411-windows-x64.exe&#xff0c;进行出现下一步的界面 以下…

神经网络 torch.nn---Non-Linear Activations (ReLU)

ReLU — PyTorch 2.3 documentation torch.nn - PyTorch中文文档 (pytorch-cn.readthedocs.io) 非线性变换的目的 非线性变换的目的是为神经网络引入一些非线性特征&#xff0c;使其训练出一些符合各种曲线或各种特征的模型。 换句话来说&#xff0c;如果模型都是直线特征的…

拼多多面试:Netty如何解决粘包问题?

粘包和拆包问题也叫做粘包和半包问题&#xff0c;它是指在数据传输时&#xff0c;接收方未能正常读取到一条完整数据的情况&#xff08;只读取了部分数据&#xff0c;或多读取到了另一条数据的情况&#xff09;就叫做粘包或拆包问题。 从严格意义上来说&#xff0c;粘包问题和…

全球AI新闻速递6.5

全球AI新闻速递 1.昆仑万维&#xff1a;开源2 千亿稀疏大模型天工Skywork-MoE&#xff0c;首个支持单台RTX 4090服务器。 2.字节豆包推出桌面客户端&#xff1a;支持 Windows / macOS&#xff0c;快捷启动、AI 划词、 AI 搜索。 3.东风柳汽与优必选科技签署人形机器人汽车制造…