我如何完美地完成手机动画？ [英] How do I do mobile animation perfectly?
问题描述
正如你可以看到我的上一个 文章 didn不会吸引社区，但我设法让iPhone上的动画通过CSS3转换非常好。
现在我使用CSS3动画规范了我的代码。这比我使用JavaScript看到的要好。但动画仍然滞后于设备。我在< body> 内有许多DIV，每次只能看到一个DIV，而其他所有的都隐藏。
如果你看这张照片，这些是4个DIV，但是第二个DIV目前正在设备上显示。现在我希望你能给我写一些代码，以了解如何将XIV上的DIV的运动应用为只显示一个DIV？
更新
我现在的代码是...
function slideLeftTo（以后）{
var page = $（to）;
var current = $（。current）;
if（page.length< 1）return;
if（current.length< 1）return;
if（page.attr（id）== current.attr（id））return;
var endX = current.width（）;
$ b $ page.css（{top：0px，left：endX +px，display：block}）;
current.css（{top：0px，left：0px，display：block}）;
setTimeout（function（）{
current.css（left，-endX +px）;
page.css（left，0px） ;
}，50）;
setTimeout（after，850）;
函数slideRightTo（to，after）{
var page = $（to）;
var current = $（。current）;
if（page.length< 1）return;
if（current.length< 1）return;
if（page.attr（id）== current.attr（id））return;
var endX = current.width（）;
page.css（{top：0px，left：-endX +px，display：block}）;
setTimeout（function（）{
current.css（left，endX +px）;
page.css（left，0px）;
}，50）;
setTimeout（after，850）;
}
现在我想请你给我写一些代码，以了解我怎么能申请DIV沿X轴的移动，因为只有一个会显示？
这解释了为什么你最后一个问题没有得到答案！
你不能期望你的代码在这里写入。也许告诉我们你已经尝试了什么，我们可以显示你出错的地方。人们不在这里为你做你的工作。
As you can see my last post didn't attract the community but I managed to get that animation on iPhone working via CSS3 transitions pretty great.
I normalized my code to use CSS3 animations now. This is little better than what I saw using JavaScript. But still the animation lags on the device. I have many DIVs inside <body> and only one at a time would be visible and all other are hidden.
If you look at this picture, these are 4 DIVs but the second DIV is being currently shown on the device. Now I want you to please write me some code to understand how can I apply movement of DIVs along x-axis as only one would be shown?
UPDATED
The code I have right now is...
function slideLeftTo(to, after) {
var page = $(to);
var current = $(".current");
if (page.length < 1) return;
if (current.length < 1) return;
if (page.attr("id") == current.attr("id")) return;
var endX = current.width();
page.css({ top: "0px", left: endX + "px", display: "block" });
current.css({ top: "0px", left: "0px", display: "block" });
setTimeout(function() {
current.css("left", -endX + "px");
page.css("left", "0px");
}, 50);
setTimeout(after, 850);
}
function slideRightTo(to, after) {
var page = $(to);
var current = $(".current");
if (page.length < 1) return;
if (current.length < 1) return;
if (page.attr("id") == current.attr("id")) return;
var endX = current.width();
page.css({ top: "0px", left: -endX + "px", display: "block" });
setTimeout(function() {
current.css("left", endX + "px");
page.css("left", "0px");
}, 50);
setTimeout(after, 850);
}
Now I want you to please write me some code to understand how can I apply movement of DIVs along x-axis as only one would be shown?
This answers why you're last question didn't get answered!
You can't just expect your code to be wrote on here. Maybe show us what you already have tried, we can show where you went wrong. People aren't here to do your job for you.
这篇关于我如何完美地完成手机动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
