html自动淡入淡出,纯css实现淡入淡出_html/css_WEB-ITnose

当时的目的是想用纯css实现一种鼠标hover A节点的时候B淡入，移出A的时候B淡出的功能，希望B在不显示的时候不会占位且无事件(通常用display：none实现)，于是就出现了困难。

以下是dom结构

transition不支持display属性的改变，而浏览器会将节点属性的变化同display一起显示，从而导致动画效果的失效

#container{width:100px;

height:100px;

background-color: red;

display:block;

}

#container + #detail{

width:10px;

height:10px;

position:absolute;

background-color:#666;

top:15px;

left:15px;

opacity:0;

transition:all 0.4s;

display: none;

}

#container:hover + #detail,#detail:hover{

opacity:1;

display: block;

}

淡入完成了，淡出却不行，这是因为detail节点不占位了

#container{width:100px;

height:100px;

background-color: red;

display:block;

}

#container + #detail{

width:10px;

height:10px;

position:absolute;

background-color:#666;

top:15px;

left:15px;

opacity:0;

-webkit-animation:hide 0.4s ease-out;

display: none;

}

#container:hover + #detail,#detail:hover{

opacity:1;

display: block;

-webkit-animation:show 0.4s ease-in;

transition-delay: 0s;

}

@-webkit-keyframes show /* Safari 和 Chrome */

{

0% {opacity:0;}

100% {opacity:1;}

}

@-webkit-keyframes hide /* Safari 和 Chrome */

{

0% {opacity:1;}

100% {opacity:0;}

}

最终实现代码(只写了chrome下的)

#container{width:100px;

height:100px;

background-color: red;

display:block;

}

#detail{

width:10px;

height:0px;

position:absolute;

background-color:#666;

top:15px;

left:15px;

opacity:0;

-webkit-animation:hide 0.4s ease-out;

display: block;

transition:height 1ms;

transition-delay: 0.4s;

overflow:hidden;

}

#container:hover + #detail{

height:10px;

opacity:1;

display: block;

-webkit-animation:show 0.4s ease-in;

transition-delay: 0s;

}

#detail:hover{

height:10px;

opacity:1;

display: block;

-webkit-animation:show 0.4s ease-in;

transition-delay: 0s;

}

@-webkit-keyframes show

{

0% {opacity:0;}

100% {opacity:1;}

}

@-webkit-keyframes hide

{

0% {opacity:1;}

100% {opacity:0;}

}

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网