javascript - 在javascript中为一组嵌套的div中的元素子集设置动画收缩和扩展过渡

标签 javascript html css nested transition

<分区>

我需要为一组嵌套的 div 中的元素子集设置收缩和展开过渡动画。展开工作正常，但收缩坏了。

我有一个结构化的元素集合(例如，此处的正方形)，我想有选择地显示这些元素并且我想为其设置动画。

结构是:collection > groups > rows > squares

在静态布局中，

正方形出现在水平行中；
行垂直分组；
一列组构成集合。

正方形可以有不同的大小，所以容器必须相应地调整 (没有固定的高度或宽度)。

我已经获得了我想要的静态布局。

问题来自于动画。我想隐藏各种子集正方形、行和/或组。附近的元素看起来很相似，所以它是用户很难分辨添加或减去的内容，因此我需要一个流畅的动画，以便用户可以了解正在发生的变化。

我正在尝试使用 CSS 动画收缩来做到这一点:

shrinkMe 类标记了我想要的所有元素此刻收缩/展开
为这些设置了 CSS 过渡时间 shrinkMe 元素
定义了一个 shrunken 类，其 CSS 具有其所有大小参数设置为 0
为了收缩或扩展，jQuery 添加或删除将 shrunken 类标记添加到 $('shrinkMe') 元素中，以制作动画介于完整尺寸和缩小尺寸 (=0) 之间的元素

不收缩的动画过渡正是我想要的。但是收缩动画根本不起作用 - 内容物沿途从容器中溢出。

shrink = function(bool,nsec) {
  $('.shrinkMe').css("transition", 'all ' + nsec+ 's');
  if (bool) $('.shrinkMe').addClass('shrunk')
  else $('.shrinkMe').removeClass('shrunk');
}
anim = function(secs) {
  return 'all ' + secs + 's'
}

.controls {
  display: inline-block;
  vertical-align: top;
}

.collection {
  display: inline;
  text-align: center;
  border: 2px solid black;
  padding: 3px;
  display: inline-block;
}

.group {
  display: block;
  margin: 2px;
  border: 2px solid black;
  padding: 3px;
}

.row {
  display: block;
  vertical-align: middle;
  background: #0cc;
  margin: 1px;
  border: 2px solid black;
}

.sq {
  display: inline-block;
  background: white;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 2px solid black;
}

.lg {
  width: 25px;
  height: 25px;
}

.shrinkMe {
  border-color: red;
}

.shrunk {
  height: 0px;
  width: 0px;
  border-width: 0px;
  padding: 0px;
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class='controls'>
  <button type='button' onclick='shrink(true,2)'>shrink reds </button>
  <br>
  <button type='button' onclick='shrink(false,2)'>unshrink reds </button>
</div>
<div class='collection'>
  <div class='group'>
    <div class='row '>
      <div class='sq'></div>
      <div class='sq'></div>
    </div>
    <div class='row shrinkMe'>
      <div class='sq lg shrinkMe'></div>
      <div class='sq shrinkMe'></div>
      <div class='sq lg shrinkMe'></div>
    </div>
  </div>
  <div class='group shrinkMe' id='group2'>
    <div class='row shrinkMe' id='group2container2'>
      <div class='sq shrinkMe'></div>
      <div class='sq shrinkMe'></div>
    </div>
    <div class='row shrinkMe'>
      <div class='sq shrinkMe'></div>
      <div class='sq lg shrinkMe'></div>
      <div class='sq shrinkMe'></div>
    </div>
  </div>
</div>

除其他事项外，我曾尝试使用不同的显式转换速度，因此容器的收缩速度比其内容的收缩速度慢，但无济于事。如果我设置行和组的显式高度和宽度，我可以获得协调的嵌套收缩，但它很难看: