javascript - 对javascript中div嵌套集中的元素子集的动画收缩和展开过渡

This question already has answers here:

How can I transition height: 0; to height: auto; using CSS?
                                
                                    （47个答案）
                                
                        
                                2年前关闭。
            
                    
我需要为嵌套div集中的元素子集的收缩和展开过渡设置动画。扩展效果很好，但收缩效果却不佳。

我有一个项目的结构化集合（例如，此处为目的的正方形），我想选择性地显示这些项目，并为其设置动画效果。

结构为：集合>组>行>正方形

在静态布局中，


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


正方形的大小可以变化，因此容器必须相应调整
（没有固定的高度或宽度）。

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

问题来自动画。我想隐藏各种子集
正方形，行和/或组。附近的物品看起来类似
用户很难分辨出要添加或减去的内容，因此
我需要一个平滑的动画，以便用户可以跟随变化。

我正在尝试使用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>

除其他外，我尝试使用不同的显式过渡速度，因此容器收缩的速度比其内容收缩慢，但无济于事。如果我为行和组设置了显式的高度和宽度，则可以得到协调的嵌套收缩，但这很丑陋：


它通过向左侧挤压而收缩，并且；
最终布局中可以包含空白空间（例如，当一行在未收缩的组内缩小时，固定的显式组容器高度意味着该行所在的位置现在有一个洞）。


我想要实现的是简单的：收缩动画，这是很好的干净非收缩的时间反转。

这也是显示问题的jsfiddle，该按钮还具有用于尝试对更深层嵌套的div进行单独计时的按钮（
无济于事...）

https://jsfiddle.net/furnas/dgq8yusy/

关于出问题的任何解释以及如何修复的建议
它？

最佳答案

使用jquery anymation onComplete事件向div添加和删除类。

因为您的css过渡就像另一个线程上的异步方法一样工作，所以，您需要等待它完成，而不是添加/删除类。

http://api.jquery.com/animate/

关于javascript - 对javascript中div嵌套集中的元素子集的动画收缩和展开过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44608273/