HTML5轉換

尋找HTML5轉換的一些例子我改編了我發現的最終得到我真正想要的東西。HTML5轉換

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     div { 
      width: 50px; 
      height: 50px; 
     } 

     div.myDiv { 
      position: absolute; 
      -webkit-transition-property: top, opacity; 
      -webkit-transition-duration: 1s, 1s; 
      -webkit-transition-timing-function:ease-in-out, ease-in-out; 

      -moz-transition-property: top, opacity; 
      -moz-transition-duration: 1s, 1s; 
      -moz-transition-timing-function:ease-in-out, ease-in-out; 

      -o-transition-property: top, opacity; 
      -o-transition-duration: 1s, 1s; 
      -o-transition-timing-function:ease-in-out, ease-in-out; 

      transition-property: top, opacity; 
      transition-duration: 1s, 1s; 
      transition-timing-function:ease-in-out, ease-in-out; 
     } 
     #one { 
      top: 0px; 
      background-color: blue; 
      opacity: 1; 
     } 

     #two { 
      top: 50px; 
      background-color: green; 
      opacity: 0; 
     } 

     #three { 
      top: 100px; 
      background-color: red; 
      opacity: 0; 
     } 

     #container { 
      width: 50px; 
      height: 150px; 
      position: relative; 
      overflow:hidden; 
     } 
    </style> 
    <script> 

    function one() { 
     document.getElementById('one').style.top = "0px"; 
     document.getElementById('two').style.top = "50px"; 
     document.getElementById('three').style.top = "100px"; 

     document.getElementById('one').style.opacity = "1"; 
     document.getElementById('two').style.opacity = "0"; 
     document.getElementById('three').style.opacity = "0"; 
    } 
    function two() { 
     document.getElementById('one').style.top = "-50px"; 
     document.getElementById('two').style.top = "0px"; 
     document.getElementById('three').style.top = "50px"; 

     document.getElementById('one').style.opacity = "0"; 
     document.getElementById('two').style.opacity = "1"; 
     document.getElementById('three').style.opacity = "0"; 
    } 

    function three() { 
     document.getElementById('one').style.top = "-100px"; 
     document.getElementById('two').style.top = "-50px"; 
     document.getElementById('three').style.top = "0px"; 

     document.getElementById('one').style.opacity = "0"; 
     document.getElementById('two').style.opacity = "0"; 
     document.getElementById('three').style.opacity = "1"; 
    } 
    </script> 
</head> 
<body> 
<div id='container'> 
    <div class="myDiv" id='one'> 
    </div> 
    <div class="myDiv" id='two'> 
    </div> 
    <div class="myDiv" id='three'> 
    </div> 
</div> 
<input type='button' onclick='one();' value='one!'></input> 
<input type='button' onclick='two();' value='two!'></input> 
<input type='button' onclick='three();' value='three!'></input> 
</body> 
</html>

我讀的地方不建議從JavaScript更改CSS屬性。我認爲這是一個不好的做法。我確定必須有更優雅更好的方式來做到這一點。

有什麼想法？（小提琴here）

來源

2012-12-03 nachovall

轉換是CSS，而不是HTML5。 – BoltClock

我不確定在JavaScript中更改CSS屬性一定是不好的做法，雖然也許如果有可能您的用戶將關閉JavaScript，您可能不想更改屬性是基本的以這種方式運作網站。

你的JavaScript可以如下，具有明顯的優勢，它可以輕鬆地將添加或刪除盒進行重構（見小提琴here）：

// We can define any number of boxes here 
    var boxes = ['blue', 'green', 'red']; 
    var height = 50; 

    // We'll put the boxes in a div which we will move 
    // so that we don't have to manage the movement of 
    // multiple elements 
    var slider = document.getElementById('slider'); 
    var div; 

    for (var i = 0; i < boxes.length; i ++) { 

    // Create a box for each element in array 
    div = document.createElement('div'); 

    div.setAttribute('id', 'box_' + i); 
    div.setAttribute('class', 'myDiv'); 

    div.style.background = boxes[i]; 
    div.style.top = (i * height) + "px"; 
    div.style.opacity = (i == 0) ? 1 : 0; 

    // Now stick it in the slider div 
    slider.appendChild(div); 
    } 

    function slide(index) { 

    // Calculate new slider position according to supplied index 
    var top = (index * height) * -1; 

    document.getElementById('slider').style.top = top + 'px'; 
    toggleVisible(document.getElementById('box_' + index)); 
    } 

    // Hide non-selected boxes and reveal selected 
    function toggleVisible(show) { 

    var div; 

    for (var i = 0; i < boxes.length; i ++) { 
     div = document.getElementById('box_' + i); 
     div.style.opacity = (div === show) ? 1 : 0; 
    } 
    }

HTML：

<div id='container'> 
    <div id='slider'></div> 
</div> 

<input type='button' onclick='slide(0);' value='one!'></input> 
<input type='button' onclick='slide(1);' value='two!'></input> 
<input type='button' onclick='slide(2);' value='three!'></input>

CSS：

div { 
    width: 50px; 
    height: 50px; 
} 

div.myDiv { 
    position: absolute; 
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 1s, 1s; 
    -webkit-transition-timing-function:ease-in-out, ease-in-out; 

    -moz-transition-property: opacity; 
    -moz-transition-duration: 1s, 1s; 
    -moz-transition-timing-function:ease-in-out, ease-in-out; 

    -o-transition-property: opacity; 
    -o-transition-duration: 1s, 1s; 
    -o-transition-timing-function:ease-in-out, ease-in-out; 

    transition-property: opacity; 
    transition-duration: 1s, 1s; 
    transition-timing-function:ease-in-out, ease-in-out; 
} 

#container { 
    width: 50px; 
    height: 150px; 
    position: relative; 
    overflow:hidden; 
} 

#slider { 
    position: absolute; 
    -webkit-transition-property: top; 
    -webkit-transition-duration: 1s, 1s; 
    -webkit-transition-timing-function:ease-in-out, ease-in-out; 

    -moz-transition-property: top; 
    -moz-transition-duration: 1s, 1s; 
    -moz-transition-timing-function:ease-in-out, ease-in-out; 

    -o-transition-property: top; 
    -o-transition-duration: 1s, 1s; 
    -o-transition-timing-function:ease-in-out, ease-in-out; 

    transition-property: top; 
    transition-duration: 1s, 1s; 
    transition-timing-function:ease-in-out, ease-in-out; 
}

來源

2012-12-04 01:04:43

問題是div必須包含內容（文本，圖像...）。我只是把盒子放在這個例子中。無論如何，我可以修改它，以適應我的需要。謝謝！ – nachovall

回答

相關問題