css高度0到高度auto,过渡的设置

1.css从高度0到高度auto,过渡设置

 方法(vue代码)

你可以通过设置transform: scale(0);到 transform: scale(1); 来实现,具体代码

你也可以通过设置transform: scaleY(0);到 transform: scaleY(1);
这两种展示的效果不一样,你可以看看你喜欢那种

// css代码// 原来的css类
.son-div {width: 100%;height: 0;transition: all 0.2s;overflow: hidden;transform: scale(0);     // scale 和 scaleY 选一个使用//   transform: scaleY(0);//  margin-top:0;  // 不使用scale的话,设置margin-top也是可以实现的,是个笨方法
}
// 元素展开添加的css类
.zhankai {height: auto;transform: scale(1);//   transform: scaleY(1);//    margin-top:10px;  这个值可以调设置的绝对值越大效果越好,正负值都可以,绝对值越小效果越不明显 ,不过不推荐,这样很影响布局
}

这是我常用的一些方法,如何有其他的更好的方法,可以评论留言。

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

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

相关文章

港口危险货物安全管理人员考试题库(含答案)

一、单选题 1.化学品安全标签内容中警示词有( )种分别进行危害程度的警示。 A、3 B、4 C、5 参考答案:A 2.运输放射性物品,应当使用( )的放射性物品运输包装容器(以下简称运输容器)。 A、专业 B、专用 C、统一 D、定制 参考答案:B 3.库区仪表及计算机监控管理系…

中电金信:金Gien乐道 | 6月热门新闻盘点 回顾这一月的焦点事件

“以检之力 e企守护”——上海市检一分院与中电金信开展联学联建 6月24日,上海市人民检察院第一分院与中电金信数字科技集团股份有限公司联合开展“以检之力 e企守护”联学联建活动。双方共同参观了全国检察机关证券期货犯罪办案基地和重大职务犯罪案件办理&#xf…

HTML5与3D打印:探索网页内容的物理化可能

随着科技的飞速发展,互联网与物理世界的交汇点日益增多。HTML5作为当前网页开发的主流标准,不仅推动了网页内容的丰富性和互动性,还在与3D打印技术的结合中,展现出了将网页内容物理化的巨大潜力。本文将探讨HTML5与3D打印的结合点…

C++ 中的数据类型

C规定在创建一个变量或者常量时,必须要指定出相应的数据类型,否则无法给变量分配内存. 1 整型 作用:整型变量表示的是整数类型的数据 C中能够表示整型的类型有以下几种方式,区别在于所占内存空间不同: 数据类型占用…

python(6)numpy的使用详细讲解

在numpy中,最基本的数据结构是数组,因此我们首先需要了解如何创建一个数组。numpy提供了多种数组创建方法,包括从列表或元组创建、从文件中读取数据、使用特定函数创建等。下面是一些常用的创建方法: 一、创建数组 1. 从列表或元…

【MySQL备份】Percona XtraBackup基础篇

目录 1.关于Percona XtraBackup 2. Percona XtraBackup有哪些特点? 3.安装Percona XtraBackup 3.1.环境信息 3.2.安装步骤 4. xtrabackup内部流程图 5.Percona XtraBackup基础语法 5.1.全量备份 5.2.增量备份 5.2.1.基于全量备份的增量备份 5.2.2.基于前…

[leetcode]max-consecutive-ones 最大连续1的个数

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int findMaxConsecutiveOnes(vector<int>& nums) {int maxCount 0, count 0;int n nums.size();for (int i 0; i < n; i) {if (nums[i] 1) {count;maxCount max(maxCount, count);} else…

安装和微调大模型(基于LLaMA-Factory)

打开终端&#xff08;在Unix或macOS上&#xff09;或命令提示符/Anaconda Prompt&#xff08;在Windows上&#xff09;。 创建一个名为lora的虚拟环境并指定Python版本为3.9。 conda create --name lora python3.9激活新创建的虚拟环境。 conda activate lora克隆项目。 git …

详解COB显示屏的技术特点

COB&#xff08;Chip on Board&#xff09;显示屏作为一种采用倒装COB封装技术的LED显示屏&#xff0c;在显示效果以及使用稳定性跟防护性方面&#xff0c;拥有更大优势&#xff0c;今天跟随COB显示屏厂家中品瑞科技一起来看看&#xff0c;COB显示屏的技术特点&#xff1a; 1、…

如何在OpenEuler 上快速部署一套Zabbix7.0监控系统

如何在OpenEuler 上快速部署一套Zabbix监控系统 一、环境信息 用途机器IP操作系统备注zabbix-server172.22.33.180openeuler 22.03 LTS SP37.0 LTS 版本&#xff0c;容器部署zabbix-agent172.16.10.182openeuler 22.03 LTS SP37.0 源码编译部署 二、Docker 部署 2.1 二进制…

【小白入门】关于视频剪辑该自学还是报课?

★解密&#xff1a;【赋能计划—剪辑小白入门】 ★ 在这个视频流量为王的时代&#xff0c;人人都想打造属于自己的IP&#xff0c;今年更是有许多企业家也纷纷下场干起来了&#xff0c;网上曾流行这样的一句话&#xff1a;“现在人们的生活方式改变了&#xff0c;所有事情都值得…

Anti-Canine Heartworm Antibody (Chicken) - HRP Conjugated

犬心丝虫&#xff08;学名Dirofilaria immitis&#xff09;是一种寄生丝虫&#xff0c;通过蚊子叮咬而传播。感染犬在早期阶段&#xff0c;大多不会出现症状。随着病情发展&#xff0c;将出现咳嗽、呼吸困难等症状&#xff0c;并伴有右心功能衰竭&#xff0c;最终全身衰弱或虚脱…

检索增强生成RAG系列3--RAG优化之文档处理

在上一章中罗列了对RAG准确度的几个重要关键点&#xff0c;主要包括2方面&#xff0c;这一章就针对其中一方面&#xff0c;来做详细的讲解以及其解决方案。 目录 1 文档解析1.1 文档解析工具1.2 实战经验1.3 代码演示 2 文档分块2.1 分块算法2.2 实战经验2.3 代码演示 3 文档e…

VLAN基础

一、什么是Vlan VLAN&#xff08;Virtual Local Area Network&#xff09;是虚拟局域网的简称&#xff0c;是一种将单一物理局域网&#xff08;LAN&#xff09;在逻辑层面上划分为多个独立的广播域的技术。每个VLAN都是一个独立的广播域&#xff0c;其内部主机可以直接通信&am…

python自动化办公之shutil

目录 1复制文件&#xff0c;此时存在2份相同文件 2移动文件&#xff0c;此时仅有1份文件 3删除文件&#xff0c;此时0份文件 用到的库&#xff1a;shutil&#xff0c;os 实现的效果&#xff1a;复制文件&#xff0c;移动文件&#xff0c;删除文件 代码&#xff1a; 1复制…

并发请求数量限制

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>并发请求数量限制</title> </head> <…

使用Colly库进行高效的网络爬虫开发

引言 随着互联网技术的飞速发展&#xff0c;网络数据已成为信息获取的重要来源。网络爬虫作为自动获取网页内容的工具&#xff0c;在数据分析、市场研究、信息聚合等领域发挥着重要作用。本文将介绍如何使用Go语言中的Colly库来开发高效的网络爬虫。 什么是Colly库&#xff1…

力扣974.和可被K整除的子数组

力扣974.和可被K整除的子数组 将余数相同的做差 若为负数要翻正再存入哈希表若为正数要存入哈希表统一操作 (sj % k k ) % k class Solution {public:int subarraysDivByK(vector<int>& nums, int k) {int n nums.size();vector<long> s(n1);for(int i0;i…

超声波清洗机怎么选?极力推荐四款口碑大牌超声波清洗机

相信大家都知道超声波清洗机&#xff0c;每次眼镜脏的时候&#xff0c;去眼镜店里让老板帮忙清洗&#xff0c;她们用的就是超声波清洗机&#xff0c;通过超声波的原理深入物品深处清洁&#xff0c;清洁效果非常好。相对手洗的方式&#xff0c;超声波清洗机能够保护镜片在清洗过…

[240701] 苹果设备持久耐用,人工智能战略成未来致胜关键

目录 苹果设备持久耐用&#xff0c;人工智能战略成未来致胜关键 苹果设备持久耐用&#xff0c;人工智能战略成未来致胜关键 苹果公司产品策略的转变及其对未来发展的影响。 现状&#xff1a; 苹果硬件创新速度放缓&#xff0c;产品外观和设计迭代周期变长&#xff0c;导致消…