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

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

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

Обновить

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

Я знаю, что вы конкретно говорите «можете ли вы сделать это в 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] } , #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] } , #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-адреса фрагмента. Якорный тег использует метод push или load плагина в своем onClick со стандартным фрагментом в атрибуте href как резерв для браузеров без включенной JS.

ОБНОВЛЕНИЕ 2: Вот еще один jsFiddle, который использует преобразования / переводы вместо переходов.

ОБНОВЛЕНИЕ 3 (роеронекислотой):

А для получения анимации, проходящей через 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"); 

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

Лучше использовать переходы, которые почти поддерживаются кросс-браузером (кроме 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> Работала для меня в Google Chrome 12.0.742.112 и Safari 5.0.5 (6533.21.1). Если он сразу не делает анимацию, это может быть связано с тем, что ваш браузер слишком быстро обрабатывает перевод (или кеширует, возможно?). Возможно, вы захотите добавить задержку. Я просто нажал кнопку обновления несколько раз очень быстро. Работал для меня.

Изменить: проверьте исходную страницу тестовой страницы girliemac . Там какой-то проницательный материал. Также см. Это сообщение SO .

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

Нульмайль Нуль Нуль Филипль Нуль Нуль Нуль Нуль Нуль Нуль Нульвальд Апартоль Нуль Нуль Нульвальзивлено –

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

 $( '#mydiv' ).animate({ 'margin-left': 'new margin value' }); 

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

  • WKWebView не перенаправляет контент при загрузке другого URL-адреса
  • -webkit-overflow-scrolling: touch разбивает мой -webkit-scrollbar css в iOS
  • Полосы прокрутки WKWebView
  • UIWebView и локальное хранилище
  • -webkit-transform Запрещает страницу с загрузки
  • Доступ к истории просмотров iphone с помощью частной структуры webkit
  • iOS Webkit игнорирует медиа-запросы
  • Нажатие WKWebView на UINavigationController вызывает ui отставание
  • Почему здесь не работает прокрутка импульса? (с использованием -webkit-overflow-scrolling: touch)
  • WKWebView + contentInset делает неправильный размер контента
  • Исправленные элементы не доступны для кликов, когда я быстро прокручиваю нижнюю часть в iOS Safari 9+
  • Interesting Posts

    Как добавить программный контроллер навигации?

    Установлена ​​зависимость «Firebase / Auth», но для них требуется более высокая минимальная цель развертывания

    xcodebuild не работает на этапе «написать вспомогательные файлы»

    Отсутствие свойства редактирования и setEditing: анимированный: в UICollectionViewCell

    Подкласс UIApplication с Swift

    Предупреждения об отказе от iOS 9 при настройке iOS 7?

    Каков наилучший способ отключить перекрестные затухания в UICollectionView / UICollectionViewLayout, который вращает или меняет изменения?

    Xcode 4: Как изменить значение переменной $ {EXECUTABLE_NAME}?

    Невозможно JSExport метод Objective-C с более чем одним параметром?

    клиентская схема url openvpn ios

    UIImagePickerController снимает фотографии без запроса «использования»

    Изображение iOS из URL Retina Size?

    Redbar Заметили при отклонении UIImagePickerController

    предупреждение: приложения для iPhone должны включать в себя архитектуру armv6 (текущий ARCHS = "armv7")

    Получить кадр из определенного индекса UISegmentedControl?

    Давайте будем гением компьютера.