无缝 onClick 动画 <div>s答案

【问题标题】：Seamless onClick animated <div>s无缝 onClick 动画 <div>s
【发布时间】：2017-03-12 19:23:03
【问题描述】：

我正在为一位摄影师创建一个作品集网站。这个想法是有3个主要部分，点击动画。当您单击其中任何一个时，将占用大约 80% 的空间来显示自己并将其他人推到一边。它们将包含专辑、文本、图像等内容。它必须在这 3 个和内部任何可点击项目之间进行无缝转换。这就是问题本身：我如何实现这一点，我想它必须是 JS，也许该功能有现成的框架？查看下面的图片以更好地理解

【问题讨论】：

您的标记在哪里？表现出一些努力。
这很简单，我只需要一个答案是否有一个现成的框架，所以我不会重新发明轮子，或者如果不是使用什么技术。我在这里而不是在 google.com 中询问的唯一原因是我没有运气在那里找到适当的信息。无论如何，我会继续潜伏，当我找到解决方案时，我会将其发布在这里，以便下一个人需要它而不必为此浪费时间。就这么简单

标签： javascript jquery html css

【解决方案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>

【讨论】：

谢谢你，这对我有帮助，我现在更明白如何做到这一点了。