javascript - 如何在 javascript/css 中为堆叠 div 设置动画？

Question

假设我有 2 divs 具有相同的 CSS 类，它们相互堆叠：

div {
  width:100px;
  height: 100px;
  background: red;
}

我如何做到这一点，以便当我单击页面顶部的按钮时，div会从底部的屏幕外创建一个新按钮并向上移动，在第二个所在的位置停止div。当再次单击该按钮时，第四个div移动从屏幕底部进入并停在第三个div...等创建“堆叠” div 效果？

我知道position:fixed并调整的值top，但我不确定如何动态计算停止动画的位置以实现此效果。

score 3 · Accepted Answer

如果您将最后添加的 div 作为 jQuery 对象，则可以通过以下方式计算其底部的 y 位置

 var divTop = $(lastDiv).offset().top;
 var divBottom = divTop + $(lastDiv).outerHeight();

然后你会将新 div 的最高值设置为 equal divBottom。

1 回答 1