如何转换 CSS 显示不透明度属性

Question

我遇到了 CSS3 动画的问题。

 .child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

仅当我删除 display 的更改时，此代码才有效。

我想在悬停后更改显示，但应使用过渡更改不透明度。

原文由 Alexis Delrieu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我改变了一点，但结果很漂亮。

 .child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

谢谢大家。

原文由 Alexis Delrieu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果可能 - 使用 visibility 而不是 display

例如：

 .child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

原文由 tomas.satinsky 发布，翻译遵循 CC BY-SA 3.0 许可协议