Учитывая это доказательство концепции, можно ли было бы анимировать маржу-левый (как отрицательный, так и положительный) с помощью JavaScript?.. И как бы вы это сделали?
Примечание. Я знаю, что это только WebKit. И я в порядке с этим, поскольку я разрабатываю для iOS Safari.
Обновление
Спасибо за ответы, но функция анимации jQuery не поддерживает чистые анимации CSS, которые мне нужны.
Я знаю, что вы конкретно говорите: "Можете ли вы сделать это в JavaScript", но вам не нужно использовать JavaScript. Я вполне уверен, что доказательство концепции, на которую вы ссылаетесь, использует только jQuery, чтобы превратить анимацию обратно в JavaScript, чтобы все браузеры играли хорошо с анимацией. Поскольку вы специально разрабатываете для Mobile Safari, вам не нужно использовать jQuery для этого, кроме как использовать плагин истории для push и pop-состояний, чтобы заставить кнопку возврата браузера работать; это полностью выполнимо с помощью свойств перехода 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 для управления стеком истории, так что вы все равно можете получать приемлемое поведение кнопки back/forward из URL-адреса фрагмента. Якорный тег использует метод push-push или load в своем onClick со стандартным фрагментом в атрибуте href как резерв для браузеров без включенной JS.
ОБНОВЛЕНИЕ 2: Здесь еще один jsFiddle, который использует преобразования/переводы вместо переходов.
ОБНОВЛЕНИЕ 3 (by 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);
Вы можете установить переход в css3, а затем последующие изменения в элементе будут анимированы.
.MY_CLASS {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out; /* IE10 */
transition: all 0.3s ease-out;
}
Это указывает, что переход с перекрестным браузером (damn IE), который применяется ко всем изменениям css, длится 0,3 секунды и упрощается, поэтому он будет замедляться к концу перехода. Поэтому, чтобы анимировать его влево/вправо, просто измените css:
$(".MY_CLASS").css("margin-left", "-300px");
Обратите внимание, что это будет анимировать его до фиксированной позиции 300 пикселей, если вы хотите анимировать позицию по отношению к ее текущему местоположению:
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
Более эффективные переходы, которые почти поддерживаются кросс-браузером (кроме IE), и устанавливают ключевые кадры через JS.
Это работает только с использованием CSS, HTML и WebKit:
#wrapper {
width: 700px;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
border-style:solid;
border-width:1px;
border-color:#ccc;
padding:30px 30px;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
-webkit-transition-property: -webkit-transform, margin-left;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease-in;
-webkit-transform: translate(100px);
}
Просто сделайте <div id="wrapper">Placeholder text</div> в файле HTML, чтобы проверить его. Работала для меня в Google Chrome 12.0.742.112 и Safari 5.0.5 (6533.21.1). Если он сразу не делает анимацию, это может быть связано с тем, что ваш браузер слишком быстро обрабатывает перевод (или кеширует, возможно?). Возможно, вы захотите добавить задержку. Я просто нажал кнопку обновления несколько раз очень быстро. Работал для меня.
Edit: Проверьте исходный код страницы girliemac. Там какой-то проницательный материал. Также см. Этот SO post.
вы можете использовать jqueries .animate() - http://api.jquery.com/animate/
Проверьте мой пример - http://jsfiddle.net/ajthomascouk/jS83H/ - Нажмите клавиши + и -
Анимация полей css с помощью jQuery работает следующим образом:
$( '#mydiv' ).animate({
'margin-left': 'new margin value'
});
Чтобы использовать анимацию webkit css, вы должны создать класс с свойством transform, тогда вы можете использовать jQuery для добавления/удаления указанного класса по мере необходимости.