纯css行内实现点击实现图片的淡入淡出
发布网友
共3个回答
懂视网
以下是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;}
}
热心网友
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片的淡入淡出</title>
</head>
<body style="background-color: #eee;">
<img style="opacity: 0; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease;"
onclick="this.style.opacity == '1' ? this.style.opacity = '0' : this.style.opacity = '1'"
src="https://www.baidu.com/img/bd_logo1.png">
<p>点击上面区域试试</p>
</body>
</html>
热心网友
用transition控制
