如何正确使用css转场？

Question

我正在尝试使一个隐藏的 div 成为 reavelead 使用过渡，但我把事情搞砸了，它不起作用。

我有一个 div 在另一个上面，但我使用可见性属性隐藏了它。现在，当我将鼠标悬停在底部 div (.hexagon) 上时，我会显示顶部 div (.product-text)。一切正常。虽然我想用过渡让它更平滑一点，但它就是行不通。

css（我用的是Sass）：

(底部div):

.hexagon {
position: relative;
background-color: black;
width: 240px; 
height: 138.56px;
margin: 69.28px 0;
border-left: solid 5px $honey;
border-right: solid 5px $honey;
display:flex;
justify-content: center;
img{
    height:100%;
    z-index: 1;
}
&:hover{
    background-color:white; 
    cursor: pointer;

    .product-text{
        visibility: visible;
        transition: visibility 3s;
    }
}

}

.....

(顶div):

.product-text{
text-align: center;
font-size:18px;
color: black;
text-shadow: 2px 2px 3px $honey;
border-radius: 7px;
font-weight:bold;
opacity: 0.8;
z-index:2;
position:absolute;
bottom:0;
left:0;
width: 100%;
height:100%;
visibility:hidden;
background-color: rgba(15, 1, 1, 0.555);

p{
    margin:0em;
}

}

Answer 1

您不能转换 visibility（也不能转换任何其他 binary 属性）。您可以做的是 opacity 转换。

.hexagon {
    &:hover {
        .product-text {
            opacity: 1;
         }
    }
}

.product-text {
    opacity: 0;
    transition: opacity 3s;
}

您可能希望 transition 属性直接应用于 class 而不是悬停状态。

示例：

.parent {
  width: 200px;
  height: 200px;
  background-color: red;
}

.child {
  width: 100px;
  height: 100px;
  background-color: blue;
  opacity: 0;
  transition: opacity 2s;
}

.parent:hover .child {
  opacity: 1;
}

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

如何正确使用css转场？

How to use css transition correctly?

css

transition