CSS3 - Анимация свойства margin-left через JavaScript

Ответ 1

Я знаю, что вы конкретно говорите: "Можете ли вы сделать это в 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);

Ответ 2

Вы можете установить переход в 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");

См. рабочий пример здесь (jsFiddle)

Ответ 3

Более эффективные переходы, которые почти поддерживаются кросс-браузером (кроме IE), и устанавливают ключевые кадры через JS.

Ответ 4

Это работает только с использованием 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.

Ответ 5

вы можете использовать jqueries .animate() - http://api.jquery.com/animate/

Проверьте мой пример - http://jsfiddle.net/ajthomascouk/jS83H/ - Нажмите клавиши + и -

Ответ 6

Анимация полей css с помощью jQuery работает следующим образом:

$( '#mydiv' ).animate({

  'margin-left': 'new margin value'

});

Ответ 7

Чтобы использовать анимацию webkit css, вы должны создать класс с свойством transform, тогда вы можете использовать jQuery для добавления/удаления указанного класса по мере необходимости.