Я знаю, что вы специально говорите: «Можете ли вы сделать это в JavaScript», но вам не нужно использовать JavaScript. Я вполне уверен, что для доказательства концепции, на которую вы ссылаетесь, используется только jQuery, чтобы анимация использовала JavaScript, чтобы все браузеры хорошо играли с анимацией. Поскольку вы специально разрабатываете для Mobile Safari, вам не нужно использовать jQuery для этого, кроме как использовать плагин истории, чтобы выдвигать и выдвигать состояния, чтобы заставить кнопку браузера работать; это полностью выполнимо через свойства перехода CSS и псевдоселектор :target.
Итак, в качестве альтернативы, вы должны быть в состоянии сделать что-то вроде этого:
В HTML:
<div id="thing-that-will-transition">
<a href="#thing-that-will-transition>click this to transition the div</a>
</div>
В CSS:
#thing-that-will-transition
{
(bunch of properties)
-webkit-transition: margin-left [the rest of your transition values]
}
#thing-that-will-transition:target
{
margin-left: [your properties]
}
Пока ваш фрагмент URL совпадает с именем элемента, который вы хотите перенести, вы должны иметь возможность вставить фрагмент в URL, используя JavaScript, если вам абсолютно необходимо вместо использование якоря с фрагментом href, в то время как переход еще имеет место. И если вы используете плагин истории jQuery или выполняете свои действия нажатием и извлечением стека истории, вы все равно получаете поведение кнопки назад для своего приложения.
Я знаю, что вы специально просили JavaScript-решение для запуска CSS-анимации, но я просто не уверен, почему это то, что вам нужно. Извините, если это вам не поможет.
ОБНОВЛЕНИЕ : Вот jsFiddle, демонстрирующий вышеприведенное . Он использует этот плагин истории jQuery для управления стеком истории, так что вы все равно можете получить приемлемое поведение кнопок назад / вперед из URL фрагментов. В теге привязки в методе onClick используется метод «push» или «load» плагина со стандартным фрагментом атрибута href в качестве запасного варианта для браузеров без JS.
ОБНОВЛЕНИЕ 2: Вот еще один jsFiddle , который использует преобразования / переводы вместо переходов.
ОБНОВЛЕНИЕ 3 (по roosteronacid):
А что касается анимации, проходящей через JavaScript, вы можете сделать:
var element = document.getElementById("...");
setTimeout(function ()
{
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);