0

HTML と JavaScript を使用して Windows 8 アプリを作成しました。

ここでは、div [2 つのテキスト ボックスとボタンを含む] を画面の右側から左側にスライドさせたいと考えています。

質問が明確であることを願っています。

4

4 に答える 4

1

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";
};

そして、あなたはそれを持っています。ハードウェアアクセラレーションとすべて。

于 2012-12-14T02:42:49.423 に答える
1

WinJSネイティブアニメーションライブラリの使用を検討してください。缶には、WinJS.UI.Animation.enterContentまたはWinJS.UI.Animation.showPanelが役立つ可能性があります。

于 2012-12-20T18:05:58.630 に答える
1

jQuerys$.animateはそのために問題ありません。ここを参照してください。

ただし、Windows 8 AppsでjQueryを使用することはセキュリティ上の制限のため問題があります。私はそれについてブログ投稿を書き、そこにWindows8対応のjQueryバージョンを提供しました。http：//www.incloud.de/2012/をご覧ください。 08 / windows-8-using-jquery-for-app-development /

于 2012-12-13T09:59:12.587 に答える
0

次のコードを使用して問題を解決します。

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 のアニメーションの詳細については、こちらをご覧ください。

于 2012-12-17T07:26:39.783 に答える