Question

我有一个设置，我有三个正方形，前两个设置为在点击第三个时消失。当你点击它时会发生什么，虽然前两个刚刚消失，没有褪色，我无法弄清楚为什么，任何想法？

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

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

提前感谢您的帮助。

Answer 1

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

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

webkit过渡不会消失，只会消失

1 个答案: