Как сделать так, чтобы один элемент (не потомок второго) был виден только в области второго элемента?

Question

Вот пример:

let btn = document.querySelector("button");
let blueCube = document.querySelector(".cube");

btn.addEventListener("click", function() {
  blueCube.style.transform = "translateX(0px)";
});

body {
  text-align: center;
}
.cubes-block {
  display: flex;
  justify-content: center;
}
.wrapper {
  display: flex;
}
.cube {
  width: 100px;
  height: 100px;
  background-color: darkorange;
  border: 1px solid black;
}
.cube:only-child {
  background-color: royalblue;
  position: absolute;
  transform: translateX(-102px);
  transition: transform 1s;
}

<body>
  <div class="cubes-block">
    <div class="wrapper">
      <div class="cube"></div>
    </div>
    <div class="wrapper">
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
    </div>
  </div>
  
  <br><br>
  
  <button>Click me!</button>
</body>

Возможно ли сделать так, чтобы синего куба (блока, без разницы) не было видно вне div с оранжевыми кубами? При этом должно сохраняться позиционирование (оранжевые блоки выровнены по центру, синий прижимается к ним слева). Примерно как если поставить блоку с оранжевыми кубами overflow: hidden; и синий куб поставить в начало этого блока, но тогда позиционирование через absolute сломается.

Answer 1

Вот так можно реализовать то, что вы хотите.

let btn = document.querySelector("button");
let blueCube = document.querySelector(".cube.blue");

btn.addEventListener("click", function() {
  blueCube.classList.toggle('shown');
});

body {
  text-align: center;
}

.cubes-block {
  display: flex;
  justify-content: center;
}

.wrapper {
  display: flex;
  overflow: hidden;
  position: relative;
}

.cube {
  width: 100px;
  height: 100px;
  background-color: darkorange;
  border: 1px solid black;
}

.cube.blue {
  background-color: royalblue;
  position: absolute;
  transform: translateX(-100%);
  transition: transform 1s;
}

.cube.shown {
  transform: translateX(0);
}

<body>
  <div class="cubes-block">
    <div class="wrapper">
      <div class="cube blue"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
    </div>
  </div>

  <br><br>

  <button>Click me!</button>
</body>

БЛОГ НА HUSL

Как сделать так, чтобы один элемент (не потомок второго) был виден только в области второго элемента?

Ответы (1 шт):