我使用HTML& amp;创建了一个Windows 8应用程序。的JavaScript。
在这里,我想从屏幕右侧向左滑动div [包含两个文本框和一个按钮]。
希望问题很明确。答案 0 :(得分:1)
jQuerys $.animate
对此很好,see here。
然而,由于安全限制,在Windows 8应用程序中使用jQuery是有问题的,我写了一篇关于它的博客文章并提供了一个Windows 8就绪的jQuery版本,看看:http://www.incloud.de/2012/08/windows-8-using-jquery-for-app-development/
答案 1 :(得分: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";
};
你有它。硬件加速和一切。
答案 2 :(得分:1)
考虑使用WinJS原生动画库。对于您的行WinJS.UI.Animation.enterContent或WinJS.UI.Animation.showPanel可能有用。
答案 3 :(得分: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动画的更多信息,请查看here