### JavaScript 实现
Mac 风格
窗口收纳
和弹出动画效果
要实现类似于
macOS 的
窗口收纳
和弹出动画效果，可以利用 CSS
和 JavaScript 来完成。以下是详细的说明以及示例代码。
#### 使用的关键技术
1. **CSS 动画**：通过 `@keyframes` 定义动画帧序列来控制
窗口的缩放
和平移。
2. **JavaScript DOM 操作**：动态修改元素样式或类名以触发动画效果。
3. **事件监听器**：绑定点击或其他交互事件到目标按钮上，从而启动动画逻辑。
#### 示例代码
以下是一个简单的例子展示如何创建一个可收纳/展开的
窗口：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Mac Style Window Animation</title>
<style>
/* 初始状态 */
.window {
width: 300px;
height: 200px;
background-color: lightblue;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 150px);
transform-origin: bottom center;
transition: all 0.5s ease-in-out;
}
/* 收纳后的状态 */
.minimized {
opacity: 0;
scale: 0.1;
transform: translateY(200px); /* 向下
移动 */
}
@keyframes popUp {
from {
opacity: 0;
scale: 0.1;
transform: translateY(200px);
}
to {
opacity: 1;
scale: 1;
transform: translateY(0);
}
}
/* 弹出时应用此动画 */
.popup-animation {
animation: popUp 0.5s forwards;
}
</style>
</head>
<body>
<div id="myWindow" class="window popup-animation"></div>
<button onclick="toggleWindow()">Toggle Window</button>
<script>
const windowElement = document.getElementById('myWindow');
function toggleWindow() {
if (windowElement.classList.contains('minimized')) {
// 如果当前是收纳状态，则
恢复原状并重新显示
windowElement.classList.remove('minimized');
setTimeout(() => {
windowElement.style.opacity = '1';
windowElement.style.scale = '1';
}, 10); // 延迟执行以确保动画顺序正确
} else {
// 如果当前处于正常状态，则将其隐藏并缩小
windowElement.classList.add('minimized');
}
}
</script>
</body>
</html>
```
上述代码实现了基本的功能需求，并且包含了两个主要部分——HTML 结构、CSS 样式定义以及 JavaScript 控制逻辑[^3]。
#### 关键点解释
- `.window`: 设置默认大小位置及过渡属性以便平滑变化。
- `.minimized`: 当前对象被
最小化时候的状态描述符，包括透明度降低(`opacity`)、尺寸压缩(`scale`)还有位移到屏幕底部的操作(`translateY`)。
- `popUp`: 自定义关键帧动画用于模拟真实世界中的物理反弹行为当窗体
打开的时候。
- `toggleWindow()` 函数负责切换组件之间的两种模式即最大化视图与
最小化图标形式之间相互转换的过程[^4]。
#### 注意事项
由于 HTML 文档加载过程中可能存在异步资源解析的情况，在某些极端条件下可能会遇到无法立即获取 body 下子节点的问题。这通常发生在 `<script>` 被放置于文档头部而非尾部的情形之下[^1]。因此建议将所有的外部脚本链接或者嵌入式的 JS 片段都安排至接近闭合标签之前的位置处。
---
扫一扫
3146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
