纯css实现淡入淡出

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

以下是dom结构

<div id="container"></div>
<div id="detail"></div>

 

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;}
}

 

 

 

转载于:https://www.cnblogs.com/dorading/p/3310364.html