css 有没有一种方法可以轻松地将这个div从bottom：0动画转换到top：0？

xzabzqsa 于 12个月前发布在其他

关注(0)|答案(1)|浏览(131)

我试图让下面的代码从bottom：0平滑地过渡到top：0。我知道转换只适用于相同的属性，但我现在不知道如何平滑地完成它。下面是有问题的代码：

.portCard * {
  max-width: 100%;
  transition: .35s .35s transform cubic-bezier(.1,.72,.4,.97);
}

.portCard {
  position: relative;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  max-width: 250px;
}

.portCardContent {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  width: 100%;
  text-align: center;
  background-color: #86B971;
  z-index: 1;
  bottom: 0;
  height: auto;
}

.portCard:hover .portCardContent {
  top: 0;
  bottom: auto;
}

.portCardTitle {
  font-size: 1.2em;
  font-weight: 700;
}

.portCardText {
  font-size: .8em;
}

.portCardLink {
  display: none;
}

个字符

css

来源：https://stackoverflow.com/questions/77451022/is-there-a-way-to-animate-translate-this-div-from-bottom-0-to-top-0-easily

1条答案

按热度按时间

brccelvz1#

将合并顶部（或底部）与translate结合起来。在您的情况下，使用bottom: 100%，这将使您的项目脱离容器，但您使用translatey(100%)纠正了这一点

.portCard * {
  max-width: 100%;
}

.portCard {
  position: relative;
  overflow: hidden;
  max-width: 250px;
}
.portCard img {
  display: block;
}

.portCardContent {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #86B971;
  z-index: 1;
  bottom: 0;
  transition: .5s;
}

.portCard:hover .portCardContent {
  translate: 0 100%;
  bottom: 100%;
}

.portCardTitle {
  font-size: 1.2em;
  font-weight: 700;
}

.portCardText {
  font-size: .8em;
}

.portCardLink {
  display: none;
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

css 有没有一种方法可以轻松地将这个div从bottom：0动画转换到top：0？

1条答案

相关问题

热门标签

最新问答