webkit转换不会褪色，只是消失

我有一个设置，我有三个方块，前两个设置为淡出时，第三个点击。当你点击它时会发生什么，尽管前两个消失了，没有消失，我无法弄清楚为什么，有什么想法？webkit转换不会褪色，只是消失

这就是小提琴和这是代码本身：

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

预先感谢任何帮助。

来源

2012-03-06 loriensleafs

如果我把

Tap to fade

例如在身体BOX3会褪色像它的猜想，但由于某种原因则占据整个宽度。不知道这是怎么回事。 – loriensleafs 2012-03-06 18:42:07

在点击功能中，您将删除“.box”类样式所应用的样式。这将删除宽度和高度等。此外，CSS和JavaScript区分大小写。准确地说，选择器之间的大小写必须与元素属性匹配。

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

来源

2012-03-06 21:11:03 fenone

非常感谢您帮助我。在点击功能中，teh + =是否保留“box”类，只需添加fadeAway类中的更改？好像只是=完全取代它就是你在说什么？ – loriensleafs 2012-03-07 14:14:54

@loriensleafs：是的“+ =”操作将左侧与右侧相加或连接（例如，使用加法，i + = 1增量）;因此，原始的className与附加名称“container_click1”连接在一起。 – fenone 2012-03-07 14:20:36

还有一个问题，我使用相同的想法设置了这个小提琴，我试图让顶层飞机在translate3d中向下移动35个像素，并且我无法使用相同的设置使它工作。我曾询问过这个问题，试图理解这个概念，然后实施它，但我很难弄明白这一点。 http://jsfiddle.net/xCkX7/3/ – loriensleafs 2012-03-07 16:32:47

webkit转换不会褪色，只是消失

回答

相关问题