无缝onClick动画<div> s

Question

我为摄影师创建了一个投资组合网站。这个想法是有三个主要部分，点击动画。当你点击其中任何一个时，它将占用大约80％的空间显露自己并将其他人推向一侧。它们将包含相册，文本，图像等内容。它必须在这些内容和任何可点击的项目之间进行无缝过渡。这就是问题本身：我如何实现这一点，我认为它必须是JS，也许这个功能有现成的框架？请查看下面的图片以便更好地理解

Answer 1

使用此作为基础，使其适合您的用例。适用于悬停在任何部分。

段：

* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
.parent {
  width: 100vw; height: 120px;
  display: flex;
  flex-direction: columns;
}
.parent > div { 
  background-color: #ddd; text-align: center; padding: 12px 8px;
  flex: 1 1 10%;
  transition: all 500ms;
}
.parent > div:hover {
  flex: 1 1 80%;
}
.parent > div:first-child { background-color: #d33; }
.parent > div:last-child { background-color: #33d; }

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>