webkit переход не исчезает, просто исчезает

У меня есть настройка, где у меня есть три квадрата, первые два настроены на исчезновение, когда нажимается третий. Когда вы нажимаете на него, что происходит, хотя первые два просто исчезают, не исчезают, я не могу понять, почему, какие-то мысли?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>

Заранее спасибо за любую помощь.

источник

2012-03-06 loriensleafs

если я ставлю

Tap to fade

, например, в Box3 тела будут исчезать, как это предположить, но по какой-то причине, то занимает всю ширину. Не уверен, что здесь происходит. – loriensleafs

В функции щелчка вы удаляете стили, применяемые стилями класса «.box». Это удаляет ширину и высоту и т. Д. Кроме того, CSS и JavaScript чувствительны к регистру. Капитализация между селекторами должна точно соответствовать атрибутам элемента.

Обновлено jsfiddle: jsfiddle.net/6fSEz/2/

источник

2012-03-06 21:11:03 fenone

Большое спасибо за помощь в этом. В функции click есть teh + = сохранить класс «box» и просто добавить изменения из класса fadeAway? Кажется, что просто = заменил его полностью, что вы говорите? – loriensleafs

@loriensleafs: Да, операция «+ =» добавляет или объединяет левую сторону с правой стороны (например, i + = 1 приращений с использованием добавления); поэтому исходное имя класса объединяется с добавленным именем «container_click1». – fenone

еще один вопрос, у меня есть эта скрипка, созданная с использованием той же идеи, я пытаюсь заставить верхнюю плоскость двигаться вниз на 35 пикселей в translate3d, и я не могу заставить ее работать, используя ту же настройку. Я спросил об этом, чтобы попытаться понять концепцию, а затем реализовать ее, но мне сложно понять это. http://jsfiddle.net/xCkX7/3/ – loriensleafs

webkit переход не исчезает, просто исчезает

ответ

Смежные вопросы