在前端开发中，动态效果是提升用户体验的重要手段之一。今天就来分享一个简单却实用的小技巧——使用JavaScript实现`div`层的缓慢收缩与展开动画。✨

首先，我们需要定义HTML结构，比如一个按钮和一个隐藏的`div`层：

```html

点击展开

```

接下来，在CSS中设置初始样式，包括宽高及背景色等。重点来了！通过JavaScript控制动画逻辑：

```javascript

const btn = document.getElementById('toggleBtn');

const content = document.getElementById('content');

btn.addEventListener('click', () => {

let isExpanded = content.style.height !== '200px';

const duration = 500; // 动画时长（毫秒）

if (isExpanded) {

expand(content, duration);

} else {

collapse(content, duration);

}

});

function expand(element, duration) {

let startHeight = element.offsetHeight;

let endHeight = 200;

let step = (endHeight - startHeight) / (duration / 16); // 每帧变化值

function frame() {

if (startHeight >= endHeight) return;

startHeight += step;

element.style.height = `${startHeight}px`;

requestAnimationFrame(frame);

}

frame();

}

function collapse(element, duration) {

let startHeight = element.offsetHeight;

let endHeight = 0;

let step = (startHeight - endHeight) / (duration / 16);

function frame() {

if (startHeight <= endHeight) return;

startHeight -= step;

element.style.height = `${startHeight}px`;

requestAnimationFrame(frame);

}

frame();

}

```

这样，当你点击按钮时，`div`层会以平滑的方式逐渐展开或收缩。无论是制作菜单栏还是提示框，这个方法都非常适用哦！🎉

快试试吧，让你的网页动起来！💃