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

учитывая это доказательство концепции, можно ли анимировать левое поле (как отрицательные, так и положительные значения) через JavaScript?.. И как бы вы это сделали?

примечание: Я знаю, что это только WebKit. И я в порядке с этим, учитывая, что я разрабатываю для iOS Safari.


обновление

Спасибо за ответы, но функция jQuery animate не поддерживает чистые анимации CSS, которые это то, что мне нужно.

11
css css3 ios mobile-safari webkit

7 ответов

Я знаю, что вы конкретно говорите "можете ли вы сделать это в JavaScript", но вам не нужно использовать JavaScript. Я уверен, что доказательство концепции, на которую вы ссылаетесь, использует только jQuery как способ заставить анимацию вернуться к JavaScript, чтобы все браузеры хорошо играли с анимацией. Поскольку вы специально разрабатываете для мобильного 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 History plugin для управления стеком истории, так что вы все еще можете получить приемлемое поведение кнопки Назад/Вперед из URL фрагмента. Тег anchor использует метод "push" или "load" плагина в своем onClick со стандартным фрагментом в атрибуте 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);
25

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

указывает почти кросс-браузер (проклятый IE) переход, который применяется ко всем изменениям css, длится 0,3 секунды и облегчает, поэтому он замедлится к концу перехода. Поэтому, чтобы анимировать его влево / вправо, просто измените css:

$(".MY_CLASS").css("margin-left", "-300px");

Примечание это будет анимировать его в фиксированном положении 300px, если вы хотите анимировать для позиции относительно ее текущего местоположения используйте:

var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");

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

9

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

5

это работает только с помощью 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 это!--10--> страница тест. Некоторые проницательные вещи есть. Также смотрите это так пост.

1

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

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

0

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

$( '#mydiv' ).animate({

  'margin-left': 'new margin value'

});
0

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

0