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轉換不會褪色，只是消失

回答

相關問題