jquery - 如何将此 div 转换为底部并添加一些随机弹出方 block

Question

我不知道如何将此 div 转换为底部。而且我不知道如何在随机方向生成会在 50 毫秒后消失的弹出方 block (简单的 div)。

我试图将此框 float 到底部，但没有帮助。

$("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});

.field {
  height: 340px;
  width: 200px;
}

.box {
  background-color: #218D9B;
  height: 320px;
  width: 160px;
  float: bottom;
  background-image: url("img/tree.png");
  background-size: 100%;
}

.transform {
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  transition: all 300ms ease;
}

.transform-active {
  height: 0px;
  width: 160px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
  <div class="box transform"></div>
</div>

<input type="button" id="button" value="Click Me" />

我期待木头藏在地下的效果。

Answer 1

为了将div高度变换到底部，可以使用定位。 将 position: relative 添加到父级，然后您可以使用 position: absolute 和 bottom: 20px 编辑框元素。

.field {
    height: 340px;
    width: 200px;
    position: relative;
}
.box {
    background-color: #218D9B;
    height: 320px;
    background-image: url(img/tree.png);
    background-size: 100%;
    bottom: 20px;
    position: absolute;
}

根据情况，另一种解决方案是使用 transform: scale() 而不是 height 来制作动画。
您只能垂直缩放并设置 transform-origin: bottom。

.box {
    background-color: #218D9B;
    height: 320px;
    width: 160px;
    background-image: url(img/tree.png);
    background-size: 100%;
    transform-origin: bottom;
}
.transform-active {
    transform: scale(1, 0);
    width: 160px;
}