巧用CSS ::details-content伪元素实现任意展开动画 - 张鑫旭-鑫空间-鑫生活
张鑫旭-鑫空间-鑫生活by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11900
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
一、温故而知新
有兴趣访问这里：“借助HTML5 details,summary无JS实现各种交互效果”
本以为这个HTML元素已经很成熟了，结果在接下来的岁月中，其又发生了一些迭代与变化。
首先，哪个三角箭头改为::marker伪元素，和
- 、
元素的显隐是通过content-visibility属性（内容隐藏，锚点匹配显示）控制的，所以transition的关键字值之一就是content-visibility属性。allow-discrete也是新特性，可以让离散的CSS属性也支持transition过渡效果，例如display属性。详见我之前撰写的这篇文章：“CSS transition-behavior让display none也有动画效果”interpolate-size:allow-keywords可以让auto尺寸也能transition过渡效果，这个之前也介绍过，参见“这啥?CSS calc-size和interpolate-size,真学不动了”一文。
然后，支持name属性，也就是如果多个
name属性值，那么这些然后，支持内容元素hash匹配自动展开（本文后面会有案例）。
再到本文要重点介绍的::details-content伪元素，可以匹配内容区域的Shadow DOM元素（见下图示意），目前最具代表性的应用就是实现展开与收起的动画效果。
二、::details-content让任意尺寸展开动画
直接看案例，下面的效果为实时渲染（点击下面的小三角标题）：
//zxx: 如果浏览器版本不足，会看不到动画效果
欢迎关注我的抖音钓鱼账号：最会钓鱼的程序员
技术账号：张鑫旭本人
::details-content {transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;height: 0;overflow: clip;}details {interpolate-size: allow-keywords;}[open]::details-content {height: auto;}相关代码如下所示：
欢迎关注我的抖音钓鱼账号：最会钓鱼的程序员
技术账号：张鑫旭本人
CSS样式部分：
::details-content { transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete; height: 0; overflow: clip;}details { interpolate-size: allow-keywords;}[open]::details-content { height: auto;}一些说明
上述效果属于渐进增强特性，浏览器不支持也没关系，不影响展开与收起，所以大家放心使用。
三、锚点匹配与自动展开
这个其实也是新的特性，之前没有的，不过这个新特性比较隐蔽。
那就是，如今呢，我家主人已经结成元婴……错了错了，串场了，如今呢，只要
例如：
欢迎关注我的抖音钓鱼账号：最会钓鱼的程序员
技术账号：张鑫旭本人
点击链接，则会看到展开效果，如下GIF录屏示意：
这个效果其实有些类似之前介绍过的hidden="until-found"，有兴趣的可以点击这里进行访问，他也是使用的content-visibility隐藏，同样是锚点匹配，或者被搜索匹配，就会显示，我怀疑这是content-visibility隐藏内容公用特性。
补充小技巧
锚点定位会触发页面的滚动，并将匹配的元素定位在浏览器的上边缘。
这就会有个问题，会将
此时，可以使用CSS scroll-margin-block-start属性进行调整，例如：
details :target { scroll-margin-block-start: 6em;}此时，定位的滚动位置会距离上边缘6em大小。
四、其他补充信息碎碎念
最后来看一下::details-content伪元素的兼容性，今年所有现代浏览器都已经支持：
看起来像是约好了的，几乎都是同一时间支持的。
语法参考：
selector::details-content
使用示意：
details[open]::details-content { /* 样式，CSS属性基本上都支持 */}其他碎碎念
人果然是赚不到认知以外的钱的。
记得3年前，疫情刚结束那会儿，还在和我老婆说，我们什么时候也能遇到08年金融危机那种资产大抄底的时候就好了，我老婆也表示赞同。
结果，这一年，我们就把闲钱用来在临港买了套房投资。
尼玛，现在跌到贷款还完都没有多余钱的地步了。
也就是那种资产大跌的时刻其实就在眼前，但是，眼界和认知不足，我们两人完全没有意识到这种情况，要是那时候持有现金，现在换个大房子都没什么压力。
但是，我们又比普通人好一些，风险意识强，量力而为，杠杆小，加上前两年股市低迷的时候，重仓了基金，目前清了70%多，还算游刃有余。
这也符合目前我在整个社会阶层的位置，看明白了这一点，其实心态还是很平和的，人最重要的还是认清自己。
好了，就扯这多吧，如果觉得内容还不错，欢迎分享，点赞，转发！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11900
（本篇完）
查看原文：巧用CSS ::details-content伪元素实现任意展开动画 - 张鑫旭-鑫空间-鑫生活
......[奇诺分享- https://www.ccino.org]官方频道,欢迎订阅.###频道主打实时推送VPS优惠信息###频道地址:@CCINOorg###群组主打实时推送网购优惠信息###群组地址: @CCINOgroup###频道主打实时推送科技信息###频道地址: @CCINOtech本文章由奇诺智能推送自动抓取,版权归源站点所有.