愿所有的美好和期待都能如约而至

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

发布时间:  来源:互联网  作者:匿名  标签:css css-transitions error How to transition CSS display + opacity properties exc  热度:37.5℃

本文介绍了如何转换CSS显示+不透明度属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的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的更改时,此代码才起作用。

我希望在悬停之后立即更改显示,但应使用过渡更改不透明度。

推荐答案

我做了一点更改,但结果很漂亮。

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

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

感谢大家。

这篇关于如何转换CSS显示+不透明度属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP