Html 使用CSS从另一个DIV进行滑动转换

我正在做一个关于HTML/CSS/Javascript的学校项目，几个小时来我一直试图解决的一个难题是一个过渡，一个div从另一个div后面滑下来，就像一个滑手机，从屏幕后面滑出键盘

我有悬停功能和一切，除了动画实际上工作

您可以在下面看到我的代码，尽管它可能有点凌乱

.hover{}
.产品内容{
宽度：100%；
过渡：1s；
排名：0；
溢出：隐藏；
}
.productcontent:悬停{
高度：300px；
}
.hover:hover+.productcontent{
显示：块；
过渡：高度1s；
}
.productcontent:悬停{
显示：块；
}
.产品内容{
显示：无；
}

虹膜
Fijiwiji先生和Matt Van

$1.00
添加到购物车

这里引起问题的两个主要属性是

显示

和

高度

。他们只需要一点更新就可以让动画按预期工作

现在，在主悬停上，

显示

属性正在从

none

设置为

block

。这是悬停时发生的唯一更改（此时未更改

.productcontent

的高度）

不要使用

显示

属性隐藏

.productcontent

，而是尝试使用

可见性

属性。单独使用CSS设置动画时，此属性要简单得多

“高度”属性无法从其默认的

auto

状态设置动画。要在CSS中设置高度动画，需要定义一个值来设置动画。如果要从隐藏状态删除，我们可以将高度设置为

0

.productcontent {
  width: 100%;
  transition: 1s;
  top: 0;
  overflow: hidden;
  visibility: hidden;
  height: 0;
}

通过在

.productcontent:hover

选择器中定义悬停状态的

高度

，在悬停

.productcontent

元素之前，高度

转换将不会生效。由于此元素已设置为在悬停
.hover
元素时显示，因此高度转换将不明显。因此，如果要查看动画，则应将“高度”属性移动到主悬停选择器：

.hover:hover + .productcontent {
  visibility: visible;
  height: 300px;
  transition: height 1s;
}

总而言之，如果您想要更多的“幻灯片”效果，而不是设置高度动画，那么最好使用
transform:translateY（）
属性。
非常感谢！这帮了大忙！