如何使第二个Div在父级row范围内完成滑动切换动画？

想让第二个Div只在父级row容器内滑动、不超出边界？只要做两个关键调整就行：

1. 给row加溢出隐藏属性 #

这是最核心的一步——给.row添上overflow: hidden，这样任何超出row范围的内容都会被自动裁掉，不会露在容器外面。修改CSS里的row样式：

.row {
  border: 1px solid black;
  width: 500px;
  overflow: hidden; /* 新增：隐藏溢出的内容 */
}

2. 调整动画位移逻辑（优化效果可选） #

原来的动画用translateX(100%)是基于元素自身宽度的位移，切换col类时元素宽度会变，容易导致滑动位置不对。可以根据row内的栅格比例调整位移值：

• 当secondDiv从占满整行（col-lg-12）切换到占7格（col-lg-7）时，需要向左滑动让出firstDiv的5格空间，修改slide-out动画：

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-calc(5/12 * 100%)); /* 向左移动firstDiv的宽度比例 */
  }
}

• 切换回整行时，让secondDiv向右滑动填满空间，修改slide-in动画：

@keyframes slide-in {
  from {
    transform: translateX(-calc(5/12 * 100%));
  }
  to {
    transform: translateX(0);
  }
}

完整修改后的代码 #

JavaScript #

function test(event) {
  var checkbox = document.getElementById('toggle');
  var firstDiv = document.getElementById('firstDiv');
  var secondDiv = document.getElementById('secondDiv');

  if (checkbox.checked) {
    secondDiv.classList.remove('col-lg-12')
    secondDiv.classList.remove('slide-in');
    secondDiv.classList.add('col-lg-7')
    secondDiv.classList.add('slide-out');
    secondDiv.addEventListener('animationend', function() {
      firstDiv.style.display = 'block';
    }, {
      once: true
    });
  } else {
    firstDiv.style.display = 'none';
    secondDiv.classList.remove('slide-out');
    secondDiv.classList.remove('col-lg-7')
    secondDiv.classList.add('col-lg-12')
    secondDiv.classList.add('slide-in');
  }
}

CSS #

.slide-in {
  animation: slide-in 3s forwards;
}

.slide-out {
  animation: slide-out 3s forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(-calc(5/12 * 100%));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-calc(5/12 * 100%));
  }
}

.row {
  border: 1px solid black;
  width: 500px;
  overflow: hidden; /* 新增溢出隐藏 */
}

HTML #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
  <div id="firstDiv" style="background-color:palegreen; display:none" class="col-lg-5">first</div>
  <div id="secondDiv" style="background-color:yellow" class="col-lg-12">Second</div>
</div>
<div>
  <input type="checkbox" id="toggle" onchange="test(event)">
  <label for="toggle">Toggle Animation</label>
</div>

（注：这里调整了初始状态，让firstDiv默认隐藏、checkbox默认未勾选，逻辑更通顺）

为啥这么改？ #

• overflow: hidden是解决超出边界的根本，它把row变成一个“裁剪框”，只显示框内的内容。
• 调整位移值是为了让滑动刚好匹配栅格的宽度比例，整个动画过程都在row内部完成，不会出现元素跑到容器外面的情况。

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