Как вы можете видеть, моя последняя запись не привлекла сообщества, но мне удалось заставить эту анимацию на iPhone работать с переходами CSS3 довольно здорово.
Я нормализовал свой код для использования CSS3-анимации.Это немного лучше, чем то, что я видел при использовании JavaScript.Но все равно анимация отстает на устройстве.У меня есть много DIV внутри <body>
, и будет виден только один за раз, а все остальные будут скрыты.
Если вы посмотрите на это изображение, это 4 DIV, но второй DIV в настоящее время отображается наустройство.Теперь я хочу, чтобы вы написали мне некоторый код, чтобы понять, как я могу применить перемещение DIV вдоль оси x, так как будет показан только один?
![enter image description here](https://i.stack.imgur.com/bBXSz.png)
ОБНОВЛЕНО
Код, который я сейчас имею, это ...
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);
}