如何动画 div 从 flexbox 的顶部移动到底部

Question

我有一个容器 div 是一个 flexbox，在那个 flexbox 里面我有三列。我想从上到下为立方体形状设置动画。但是，使用 translateY() 它只会将立方体向下移动到自身的距离，而不是父级。我怎样才能修改它，让它移动到容器的底部？

div {
  display: flex;
  justify-content: space-between;
  text-align: center;
  transition: 350ms;
  font-size: x-large;
}

div div {
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.cube {
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-image: linear-gradient(black, gray, black);
}

div:hover .cube {
  transform: translateY(100%);
}

<div style="width:800px;height:800px;border: medium #999999 solid">
  <div class="cube">A cube</div>
</div>

Answer 1

您可以使用相对位置并为最高值设置动画：

div {
  position: relative;
  top: 0;
}
div:hover .cube {
  top: 75%;
}

div {
  display: flex;
  justify-content: space-between;
  text-align: center;
  transition: 350ms;
  font-size: x-large;
  position: relative;
  top: 0;
}

div div {
  color: black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: red;
}

.cube {
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-image: linear-gradient(black, gray, black);
}

div:hover .cube {
  top: 75%;
}

<div style="width:800px;height:800px;border: medium #999999 solid">
  <div class="cube">This is a cube</div>
  <div>This is a triangle</div>
  <div>This is a big, green circle</div>
</div>

Answer 2

在我的解决方案中，我使用了 bottom 和 transform 属性来获得所需的结果。我已经以注释的形式在需要的地方解释了代码。

.container {
  width: 800px;
  height: 800px;
  border: medium #999999 solid;
  /* set the container position to relative */
  position: relative;
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: x-large;
}

.container div {
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.cube {
  /* set the cube position to absolute */
  position: absolute;
  /* initially position the cube at the top  */
  bottom: 100%;
  /* move down the origin of the element by 100% of its height (so that it's visible on the screen)  */
  transform: translateY(100%);
  /* add a transition of 1s on both bottom and transform properties  */
  transition: bottom 1s, transform 1s;
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-color: black;
}

.container:hover .cube {
  /* on hover, move the element to the bottom of the container  */
  bottom: 0;
  /* set the origin to its original position  */
  transform: translateY(0%);
}

<!-- Added the class "container" -->
<div class="container">
  <div class="cube">This is a cube</div>
  <div>This is a triangle</div>
  <div>This is a big, green circle</div>
</div>

如何动画 div 从 flexbox 的顶部移动到底部

How to animate a div to move from the top of a flexbox to the bottom

html

javascript

css

css-transitions

css-animations