提示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轉換

回答

相關問題