CSS转换 - 反转起点/方向

Question

我想让我的标签动画从上往下展开，而不是从下往上。这样顶部就会打开，而底部则保持不变：

div.label4 {
  background-color: #4D6EF6;
  width: 278px;
  height: 388px;
  margin: 10px auto;
  text-align: center;
  vertical-align: middle;
  color: #4D6EF6;
  font-size: 30px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-decoration: none;
  border: transparent;
  float: left;
  transition: width 1.5s, height 1.5s;
  transition-duration: 1.5s
}

div.label4:hover {
  height: 194px;
}

<div class="label4"></div>

- Kalashnikov

Answer 1

只需将其包装在具有flex-direction: column-reverse的父元素中，就完成了：

.parent {
  display: flex;
  flex-direction: column-reverse;
  height: 388px;
  width: 278px;
}

div.label4 {
  background-color: #4D6EF6;
  width: 278px;
  height: 388px;
  margin: 10px auto;
  text-align: center;
  vertical-align: middle;
  color: #4D6EF6;
  font-size: 30px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-decoration: none;
  border: transparent;
  float: left;
  transition: width 1.5s, height 1.5s;
  transition-duration: 1.5s
}

div.label4:hover {
  height: 194px;
}
.parent {
  display: flex;
  flex-direction: column-reverse;
  height: 388px;
  width: 278px;
}

<div class="parent">
  <div class="label4"></div>
</div>

- tao

---

好的解决方案 +1 - sol

你的支持率比较高，大约是~2.5%。经典 :) - tao

哈，你从哪里可以得到这些数字？ - sol

你使用的是CSS Level 1的position，目前已经被100%的浏览器支持。而我使用的是flexbox，目前支持率为97.71%。点击 [Show all] 可以查看详细信息。Caniuse最酷的地方是它还提供了已知问题的解决方法，真的非常有用。顺便提一下，CSS Grid也正在逐渐兴起。一个月前，支持率还只有约5%。 - tao

Answer 2

如果您可以修改HTML，您可以创建一个容器，然后使用"position: absolute"和"bottom"属性来定位".label4"的位置。

.parent {
  height: 388px;
  padding-top: 10px;
  position: relative;
}

div.label4 {
  background-color: #4D6EF6;
  width: 278px;
  height: 388px;
  margin: 10px auto;
  text-align: center;
  vertical-align: middle;
  color: #4D6EF6;
  font-size: 30px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-decoration: none;
  border: transparent;
  float: left;
  transition: width 1.5s, height 1.5s;
  transition-duration: 1.5s;
  position: absolute;
  bottom: 0;
}

div.label4:hover {
  height: 194px;
}

<div class="parent">
  <div class="label4"></div>
</div>

- sol

Answer 3

你可以通过使用更灵活和更好的transform，并将transform-origin设置到元素的每个侧面来实现所需的动画。

div.label4 {
  background-color: #4D6EF6;
  width: 278px;
  height: 388px;
  margin: 10px auto;
  text-align: center;
  color: #4D6EF6;
  font-size: 30px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-decoration: none;
  border: transparent;
  transition: transform 1.5s;
  transform: scaleY(1);
  transform-origin: bottom center;
}

div.label4:hover {
  transform: scaleY(0.5);
}

<div class="label4"></div>

- Alex

---

这确实是一种更好（成本更低）的动画技术，但代价是：该元素将不再能够容纳任何内容（图像或垂直居中的标题），因为它们会被动画所扭曲。（OP说这是一个标签动画 - 标签通常包含某种信息）。 - tao

不仅如此，如果元素具有边框半径，它也会变形。 - Alyona

@AndreiGheorghiu 这是真的，但这取决于动画的目的。 - Alex