transition & scrollHeight 动效

by 李奕锦 from https://qd-dajin.com/2024/04/30/%e5%9b%ba%e5%ae%9a%e4%bd%8d%e7%bd%ae%e5%8a%a8%e6%95%88/ 

今天心情非常好,很想写一下最近所遇到的问题。

一、需求产生的背景

某电商项目,设计想要点击按钮下拉展开动效。

类似下图:

二、效果

效果链接:https://jsbin.com/vosanijule/1/edit?html,output

核心代码:

1、HTML 部分:使用一个按钮和一个包含要展开内容的 div 元素

2、CSS 部分:将 div 元素的高度设置为 0,并使用 CSS 过渡效果将其高度从 0 到实际高度的变化时间设置为 0.5 秒。

3、JavaScript 部分:使用 querySelector 方法获取按钮和内容元素,并使用 addEventListener 方法在按钮上添加点击事件监听器。

4、在点击事件处理程序中,将内容元素的高度设置为其滚动高度加上 “px” 单位,以实现动画效果,由于 transition 过渡效果,高度变化的速度将从快到慢,直到达到最终高度,这里使用 scrollHeight 属性获取内容元素的实际高度。

三、transition

transition属性可以被指定为一个或多个 CSS 属性的过渡效果,多个属性之间用逗号进行分隔。

四、scrollHeight

Element.scrollHeight 只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。


已发布

分类

来自

标签:

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注