纯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 ea-out;
display: none;
}
#container:hover + #detail,#detail:hover{
opacity:1;
display: block;
-webkit-animation:show 0.4s ea-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 ea-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 ea-in; transition-delay: 0s;
}
#detail:hover{
height:10px;
opacity:1;
display: block;
-webkit-animation:show 0.4s ea-in; transition-delay: 0s;
}
掌声课文原文@-webkit-keyframes show
{
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes hide
{
0% {opacity:1;}
100% {opacity:0;}
}
