> 웹 프론트엔드 > HTML 튜토리얼 > 纯css实现淡入淡出_html/css_WEB-ITnose

纯css实现淡入淡出_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:33:54
원래의
1318명이 탐색했습니다.

当时的目的是想用纯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.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿