Webkit过渡不会褪色，只是消失

我有一个设置，其中我有三个正方形，前两个设置为在单击第三个时逐渐消失。当你点击它时，会发生什么，尽管前两个只是消失了，没有消失，我真的不明白为什么，有什么想法吗？

http://jsfiddle.net/6fSEz/

这是小提琴，这是代码本身：

<html>
<head>
<style>
.box 
{     
    opacity:1;
    color: white;
    width: 100px;
    height: 100px;
} 
#box1
{
    background-color: green;
}
#box2
{
    background-color: red;
}
#box3
{
    background-color: blue;
}
.fadeAway1
{ 
    opacity:0;
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 2s; 
}  
.fadeAway2 
{ 
    opacity:0;
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 5s; 
}  
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" onclick="box2.className='fadeway1';box1.className='fadeaway2';"   
class="box">Tap to fade</div>

</body>
</html>

提前感谢您的帮助。

在点击函数中，您将删除".box"类样式应用的样式。这会删除宽度和高度等。此外，CSS和JavaScript区分大小写。选择器之间的大写字母必须与元素属性完全匹配。

更新后的jsfiddle.net/6fSEz/2/

相关内容

最新更新

热门标签：