响应式过渡及绝对位置变换：div全屏展开效果实现咨询

嘿，我来帮你搞定这个点击四角div触发全屏扩展的效果！结合你给出的初始布局基础，我们可以通过CSS过渡和简单的JavaScript逻辑来实现这个平滑的动画效果，下面是完整的实现方案：

1. HTML结构 #

首先我们需要一个容器来包裹四个角的div，每个div用统一的类名方便控制：

<div class="container">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

2. SCSS样式实现 #

这里我们用SCSS的变量和嵌套来简化代码，核心是给每个.panel设置基础定位、尺寸，再通过.active类触发全屏状态，同时加上过渡动画让变化更平滑：

// 定义四个面板的颜色变量
$section-colors: #ff6b6b, #4ecdc4, #45b7d1, #96ceb4;

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.panel {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); // 用缓动函数让动画更自然
  cursor: pointer;
  
  &:first-child {
    top: 0;
    left: 0;
    background: nth($section-colors, 1);
  }
  &:nth-child(2) {
    top: 0;
    left: 50%;
    background: nth($section-colors, 2);
  }
  &:nth-child(3) {
    top: 50%;
    left: 0;
    background: nth($section-colors, 3);
  }
  &:nth-child(4) {
    top: 50%;
    left: 50%;
    background: nth($section-colors, 4);
  }
  
  // 全屏状态的样式
  &.active {
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    z-index: 10; // 确保全屏面板在最上层
  }
}

如果你不用SCSS，也可以转成普通CSS版本：

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.panel {
  position: absolute;
  width: 50%;
  height: 50%;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: pointer;
}

.panel:first-child {
  top: 0;
  left: 0;
  background: #ff6b6b;
}
.panel:nth-child(2) {
  top: 0;
  left: 50%;
  background: #4ecdc4;
}
.panel:nth-child(3) {
  top: 50%;
  left: 0;
  background: #45b7d1;
}
.panel:nth-child(4) {
  top: 50%;
  left: 50%;
  background: #96ceb4;
}

.panel.active {
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
  z-index: 10;
}

3. JavaScript交互逻辑 #

我们需要给每个面板添加点击事件，实现点击切换全屏/还原的效果，同时确保同一时间只有一个面板处于全屏状态：

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => {
  panel.addEventListener('click', () => {
    // 先移除所有面板的active类
    panels.forEach(p => p.classList.remove('active'));
    // 给当前点击的面板添加active类（如果已经有则移除，实现切换）
    panel.classList.toggle('active');
  });
});

关键说明 #

• 过渡动画：通过transition属性控制尺寸、定位变化的动画时长和缓动效果，这里用了cubic-bezier来实现更有弹性的动画效果。
• 全屏状态：.active类强制将面板的top、left设为0，宽高设为100%，同时提高z-index确保它在其他面板上方。
• 交互逻辑：点击时先清空所有面板的激活状态，再切换当前面板的状态，避免多个面板同时全屏的混乱情况。

内容的提问来源于stack exchange，提问作者user7124880