纯css行内实现点击实现图片的淡入淡出

发布网友发布时间：2022-04-24 18:19

共3个回答

懂视网时间：2022-05-12 23:59

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

以下是dom结构

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

淡入完成了，淡出却不行，这是因为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;}
}

热心网友时间：2022-05-12 21:07

<!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>

热心网友时间：2022-05-12 22:25

用transition控制