在Windows8中滑動div

Question

我已經使用HTML和JavaScript創建了Windows 8應用程序。

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

希望問題清楚。

Answer 1

jQuerys $.animate很好， 請參見此處 。

但是，由於安全限制，在Windows 8 Apps中使用jQuery是有問題的，我為此寫了一篇博客文章，並在那里提供了Windows 8就緒的jQuery版本，請看： http : //www.incloud.de/2012/ 08 / windows-8-使用jquery-for-app-development /

Answer 2

這是使用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 3

考慮使用WinJS本機動畫庫。 對您來說WinJS.UI.Animation.enterContent或WinJS.UI.Animation.showPanel可能會有用。

Answer 4

使用以下代碼解決了問題：

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

然后在JavaScript中，我剛剛將opacity屬性設置為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動畫的更多信息，請在此處查看