在windows8中滑動div

Question

我使用JavaScript創建了一個使用HTML &的Windows 8應用程序。

在這裏，我想從屏幕右側向左滑動div [包含兩個文本框和一個按鈕]。

希望問題清楚。

Answer 1

問題通過使用下面的一段代碼解決：

CSS: 
    position: fixed; 
    right: 0px; 
    top: 0px; 
    width: 308px; 
    height: 100%; 
    color: white; 
    background-color: bisque; 
    opacity: 0; 
    z-index: 1; 

然後在JavaScript我已不透明度屬性只是設置爲1。

JS: 

(function() { 
"use strict"; 
var page = WinJS.UI.Pages.define("/default.html", { 
    ready: function (element, options) { 
     btnname.addEventListener("click", togglePanelUI, false); 

     myPanel = element.querySelector("#divname");  }  //div name is name of div which u wants to slide 
}); 

var animating = WinJS.Promise.wrap(); 
var myPanel; 
function togglePanelUI() {    // If element is already animating, wait until current animation is complete before starting the show animation. 
    animating = animating 
     .then(function() { 
      // Set desired final opacity on the UI element. 
      myPanel.style.opacity = "1"; 

      // Run show panel animation. 
      // Element animates from the specified offset to its actual position. 
      // For a panel that is located at the edge of the screen, the offset should be the same size as the panel element. 
      // When possible, use the default offset by leaving the offset argument empty to get the best performance. 
      return WinJS.UI.Animation.showPanel(myPanel); 
     }); 

} 
})(); 

瞭解有關Windows 8中的動畫的更多信息，看看here

Answer 2

jQuerys $.animate對此很好，see here。

但是，在Windows 8中使用jQuery的應用是有問題的，由於安全限制，我已經寫了一個博客帖子，並提供了Windows 8的準備jQuery的版本出現，我們來看一看：http://www.incloud.de/2012/08/windows-8-using-jquery-for-app-development/

Answer 3

下面是一個例子使用CSS轉換。

/* CSS */ 
#myDiv { 
    width:300px; 
    height:300px; 
    box-sizing:border-box; 
    position:relative; 
    left:-300px; 
    border:2px solid; 
    transition:1s; 
} 

然後在JavaScript中，你只需設置left屬性編程。在我的情況下，我做了它響應按鈕點擊。

// js 
element.querySelector("#go").onclick = function(e) { 
    element.querySelector("#myDiv").style.left = "0px"; 
}; 

那裏你有它。硬件加速和一切。

Answer 4

考慮使用WinJS本土動畫庫。對於您的罐頭WinJS.UI.Animation.enterContent或WinJS.UI.Animation.showPanel可能會有用。