[英]Sliding a div in windows8
i have created a Windows 8 app using HTML & JavaScript. 我已经使用HTML和JavaScript创建了Windows 8应用程序。
Here i want to slide a div[contains two textbox and a button] from right side of the screen towards left. 在这里,我想从屏幕右侧向左滑动div [包含两个文本框和一个按钮]。
hopes the question is clear. 希望问题清楚。
jQuerys $.animate
is fine for that, see here . jQuerys $.animate
很好, 请参见此处 。
However, using jQuery in Windows 8 Apps is problematic due to security restrictions, I've written a blog post on that and provided a windows 8 ready jQuery version there, take a look: http://www.incloud.de/2012/08/windows-8-using-jquery-for-app-development/ 但是,由于安全限制,在Windows 8 Apps中使用jQuery是有问题的,我为此写了一篇博客文章,并在那里提供了Windows 8就绪的jQuery版本,请看: http : //www.incloud.de/2012/ 08 / windows-8-使用jquery-for-app-development /
Here's an example of using CSS transitions. 这是使用CSS过渡的示例。
/* CSS */
#myDiv {
width:300px;
height:300px;
box-sizing:border-box;
position:relative;
left:-300px;
border:2px solid;
transition:1s;
}
Then in JavaScript you simply set the left
property programmatically. 然后,在JavaScript中,您只需以编程方式设置left
属性。 In my case I did it in response to a button click. 就我而言,我这样做是为了响应单击按钮。
// js
element.querySelector("#go").onclick = function(e) {
element.querySelector("#myDiv").style.left = "0px";
};
And there you have it. 那里有它。 Hardware accelerated and everything. 硬件加速和一切。
Consider using the WinJS native animations library. 考虑使用WinJS本机动画库。 For your can WinJS.UI.Animation.enterContent or WinJS.UI.Animation.showPanel could be useful. 对您来说WinJS.UI.Animation.enterContent或WinJS.UI.Animation.showPanel可能会有用。
Problem solved by using the following piece of code: 使用以下代码解决了问题:
CSS:
position: fixed;
right: 0px;
top: 0px;
width: 308px;
height: 100%;
color: white;
background-color: bisque;
opacity: 0;
z-index: 1;
Then in JavaScript I have just set the opacity property to one. 然后在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);
});
}
})();
for more information regarding animations of windows 8, have a look at here 有关Windows 8动画的更多信息,请在此处查看
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.