javascript - 使用 CSS Transform Scale 的画板样式布局

Question

我想让 .container 和 .box 从我点击的对象中放大和缩小。我遇到的问题是当我缩放时，它从第一个 .box div 缩放，而不是我点击的那个。

每个 .box 都将包含它自己独特的内容，因此在“画板” View (缩小)中查看此内容时，我希望人们能够看到该特定 .box 中包含的内容。当人们单击其中一个框时，我希望它缩小到 (1) 以覆盖视口(viewport)。如果此人在第 4 个 .box 上并且他们单击“缩小”，我希望它从那个特定的 .box 缩小。

每个框都将是视口(viewport)的大小，这就是现在的设置方式。

有人有只用 CSS 的解决方案吗？或者这是可以在 JS 中更好地完成的事情？我不是 JS 专家，我只是刚刚接触它，所以我很好奇我是否可以在一些简单的 JS 中做些什么。

请看我的codepen:

http://codepen.io/jareko999/pen/eZGLZB

HTML

<div class="bar">
  <button class="zoomout" onclick="zoomOut()">Zoom Out</button> 
</div>

<div class="container">
  <div class="artboard">  
    <div class="box">
      <i class="fa fa-diamond"></i>
    </div>
    <div class="box">
      <i class="fa fa-bolt"></i>
    </div>
    <div class="box">
      <i class="fa fa-flag"></i>
    </div>
    <div class="box">
      <i class="fa fa-flask"></i>
    </div>
  </div> 
</div>

CSS

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  background: #e1e1e1;
  overflow-y: hidden;
}

.bar {
  position: fixed;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: white;
  padding: 14px 0;
  z-index: 1;
}

.zoomout {
  -webkit-appearance: none;
  border: none;
  outline: 0;
  width: 100px;
  height: 40px;
  margin: auto;
  background: black;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

.container {
  height: 100vh;
  width: 100%;
  transition: .2s ease-out;
  transform: scale(1);
}

.container-small {
  height: 100vh;
  width: 100%;
  transition: .2s ease-out;
  transform: scale(.7);
}

.artboard {
  height: 100%;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  background: #e1e1e1;
}

.box {
  padding-top: 44vh;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px #a9a9a9;
  background: linear-gradient(to right, #276cd6 , #00a651);
  transition: .2s ease-out;
  transform: scale(1);
}

.box-small {
  padding-top: 44vh;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px #a9a9a9;
  background: linear-gradient(to right, #276cd6 , #00a651);
  transition: .2s ease-out;
  transform: scale(.9);
  cursor: pointer;
}

.box i {
  color: #e1e1e1;
  font-size: 3em;
}

.overflow {
  overflow: hidden;
}

.remove {
  display: none;
}

::-webkit-scrollbar {
  width: 12px;
  height: 4px;
}

/* Track */

::-webkit-scrollbar-track {
    background: white;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #4099ff; 
}

JS

$(document).ready(function() {
   $('.container').addClass('overflow');
});

function zoomOut() {
  $('.bar').addClass('remove');
  $('.box').addClass('box-small');
  $('.container').removeClass('overflow');
  $('.container').addClass('container-small');
}

$('.box').click(function() {
  $('.bar').removeClass('remove');
  $('.box').removeClass('box-small');
  $('.container').addClass('overflow');
  $('.container').removeClass('container-small');

});

Answer 1

您尝试实现的目标可以使用纯 CSS 方法来完成。 此方法依赖于使用位置哈希 (url.com#foobar) 和 :target 伪选择器。

:target 伪选择器允许您定位 ID 与位置哈希匹配的元素。例如，假设您有一个 ID 为“foobar”的元素，#foobar:target 选择器仅在您导航到 url.com#foobar 时才适用。您可以使用指向 #foobar 的 href 属性创建一个链接，让按钮触发此伪选择器。

在您的情况下，您可以在匹配#container 位置哈希时应用缩小样式，并且仅显示与位置哈希匹配的幻灯片。

这种方法的缺点是必须添加id，添加链接才能真正触发:target伪类。

我的解释可能不是很清楚，所以我放了这个demo: http://codepen.io/ntim/pen/ONxGJd