提示Webkit转换

我有一个包含三个框的页面。我试图发生的事情是，当我点击第三个盒子时，盒子1被提示以一种速度消失，并在较慢的盒子中消失两个盒子。提示Webkit转换

<html> 
<head> 
<style> 
div.box { /* this style applies only to the 'before' transition state */ 
opacity:1;} 
div.fadeAway { /* give the transition rules to "after" state */ 
opacity:0; 
-webkit-transition-property: opacity; 
-webkit-transition-duration: 2s; } 
div.fadeAway2 { /* give the transition rules to "after" state */ 
opacity:0; 
-webkit-transition-property: opacity; 
-webkit-transition-duration: 5s; } 
</style> 

</script> 
</head> 

<body> 
    <div class="box" 
style="width:100px; 
height:100px; 
background-color:green;"> 
Tap to fade 
</div> 


    <div class="box2" 
style="width:100px; 
height:100px; 
background-color:red;"> 
Tap to fade 
</div> 

<div class="box3" 
style="width:100px; 
height:100px; 
background-color:blue;" 
this.onclick=".box2 .box3.className = 'fadeaway''fadeaway2'"> 
Tap to fade 
</div> 

</body> 
</html>

在此先感谢您的帮助。

来源

2012-03-05 loriensleafs

这里是我放在一起捣鼓它http://jsfiddle.net/mCjmt/ – loriensleafs 2012-03-05 20:10:15

<html> 
<head> 
<style> 
    .box 
    {  
     opacity:1; 
     color: white; 
     width: 100px; 
     height: 100px; 
    } 

    #box1 
    { 
     background-color: green; 
    } 

    #box2 
    { 
     background-color: red; 
    } 

    #box3 
    { 
     background-color: blue; 
    } 

    div.fadeAway1 
    { 
     opacity:0; 
     -webkit-transition-property: opacity; 
     -webkit-transition-duration: 2s; 
    } 

    div.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" class="box">Tap to fade</div> 


<script> 
    (function() { 
     document.getElementById('box3').addEventListener('click', function() { 
      for (var i = 1, stop = 2; i <= stop; i += 1) { 
       document.getElementById('box' + i).className = "box fadeAway" + i; 
      } 
     }, false); 
    })(); 

</script> 

</body> 
</html>

下面是实现jQuery的一个例子：

<html> 
<head> 

<style> 
    .box 
    {  
     opacity:1; 
     color: white; 
     width: 100px; 
     height: 100px; 
    } 

    #box1 
    { 
     background-color: green; 
    } 

    #box2 
    { 
     background-color: red; 
    } 

    #box3 
    { 
     background-color: blue; 
    } 

</style> 
</head> 

<body> 
<div id="box1" class="box"></div> 
<div id="box2" class="box"></div> 
<div id="box3" class="box">Tap to fade</div> 


<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#box3").click(function() { 
      for (var i = 1, stop = 2; i <= stop; i += 1) { 
       $('#box' + i).fadeTo(500 * (i*2),0); 
      } 
     }); 
    }); 

</script> 

</body> 
</html>

来源

2012-03-05 21:17:18 fenone

好，所以这肯定的作品，感谢这样做的我。所以我问的原因是因为这是我最终希望做的更简单的版本，这是一个在webkit中设置的3d动画：http://www.klossal.com/portfolio/slider.html我曾希望在上层和下层互相坍塌，在中间会议中作为一个“奇异”层进行动画，然后将它旋转起来。 – loriensleafs 2012-03-06 13:24:53

我无法改变你想出来的效果，使它成为webkit 3d的东西。 jsfiddle在这里http://jsfiddle.net/9BEUQ/开始时会将translate3d（-14px，-120px，3px）的变化动画化为translate3d（-14px，-85px，3px）。我无法让这两个改变onclick。 – loriensleafs 2012-03-06 13:25:05

所以我试图采取婴儿的步骤，http://jsfiddle.net/VfURZ/10/我试图让这个小提琴改变4个div的两个属性。每个div都有一个父母和一个孩子，分开的课程，单独的ID。我不知道如何更新你的脚本让它检索两个元素ID。我想用javascript和webkit而不是jQuery来做这些转换。 – loriensleafs 2012-03-06 15:32:30

提示Webkit转换

回答

相关问题