在前端开发中，我们经常需要使用动画来增强用户交互体验。其中一种较为常见的动画效果是滑动展示，即元素从顶部或底部向上或向下滑动以显示或隐藏其内容。在过去，jQuery 是实现这种动画效果的主要方式之一，但随着 ES6 的普及和浏览器性能的提升，我们可以使用原生 JavaScript 来实现这个效果，并减少项目依赖。
在本文中，我们将介绍如何使用纯 JavaScript 实现 Slidedown 效果，并提供示例代码和指导意义，以帮助读者更好地学习和应用这项技术。
实现思路：
实现 Slidedown 的基本思路是：
- 按照需求设置元素初始和目标高度。
- 使用 CSS transition 属性将元素高度进行过渡动画。
- 在 JavaScript 中通过修改元素高度触发过渡动画。
具体步骤如下所示：
第一步：设置元素样式
在 HTML 文件中添加一个需要展示的元素。例如：
<div id="slide-container"> <p>这是要展示的内容</p> </div>
然后，使用 CSS 样式规则设置该元素的高度、定位等属性，如下所示：
#slide-container {
height: 0px;
overflow: hidden;
position: relative;
transition: height 0.5s ease-out;
}其中，height: 0px 表示元素的高度开始时为零；overflow: hidden 表示内容超过元素高度时将隐藏多余的内容；position: relative 表示该元素相对于其父元素进行定位；transition: height 0.5s ease-out 表示在高度变化时使用 0.5s 的时间和缓动函数实现过渡动画。
第二步：获取元素高度
在 JavaScript 中，使用 offsetHeight 属性获取元素的当前高度并存储到变量中，例如：
const slideContainer = document.getElementById("slide-container");
const slideContent = slideContainer.querySelector("p");
const slideHeight = slideContent.offsetHeight;其中，document.getElementById("slide-container") 用于获取 HTML 元素节点；querySelector("p") 用于获取第一个 <p> 标签元素节点；offsetHeight 用于获取元素的高度值。
第三步：触发 Slidedown 效果
最后一步是在 JavaScript 中修改元素高度并触发过渡动画。我们可以通过设置元素样式的方式来修改高度，然后等待浏览器渲染完毕后再重新设置高度以触发过渡动画，如下所示：
-- -------------------- ---- -------
-------- ----------- -
-- ------
----- -------------- - -------------------------------------------
----- ------------ - ----------------------------------
----- ----------- - --------------------------
-- ------
--------------------------- - -------------------
-- ---------
------------------------------- -- -
-- -------------
--------------------------- - -------
---
-在上面的代码中，window.requestAnimationFrame() 方法用于等待浏览器渲染完毕后再执行回调函数。在回调函数中，将元素的高度设置为 auto，即自适应内容高度，从而触发 Slidedown 效果。
示例代码：
下面是完整的示例代码，供读者参考和练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/27214) ，转载请注明来源
[https://www.javascriptcn.com/post/27214](https://www.javascriptcn.com/post/27214)