Javascript + CSS: Преобразование из элементов с абсолютным позиционированием в CSS Преобразования (слева, сверху, ширина, высота в translateX, translateY, scale) - PullRequest
Новая
       30

Javascript + CSS: Преобразование из элементов с абсолютным позиционированием в CSS Преобразования (слева, сверху, ширина, высота в translateX, translateY, scale)

1 голос
/ 23 марта 2012

Я хотел бы преобразовать карусель Javascript для бесперебойной работы на устройствах iOS iPad и iPhone, а также на устройствах Android, которые используют webkit, способный использовать аппаратное ускорение преобразований CSS.

Есть лиуже есть библиотека или некоторые фрагменты кода, которые позволят установить положение и размер?

Я нашел jquery.animate-extended , который может быть близко, но требует анимации, а также обнаруживает функции -Я хочу сделать что-то попроще, это выглядит значительно сложнее.

Есть несколько сложностей, которые, я подозреваю, необходимо решить с помощью решения:

- Простое повторное использование кода для использования либо top/ left CSS-атрибуты или CSS-преобразования с переводом (и любой пересчет, необходимый для их преобразования)

-Использование масштабного преобразования вместо установки ширины и высоты

Настройка шагов, таких как:

-Настройка -webkit-transform-style до preserve-3d

-Настройка -webkit-transform-origin при необходимости (и что делать?)

1 Ответ

0 голосов
/ 23 апреля 2012

Я вижу Zepto в тегах, так что кажется, что вы рассмотрели его, и он не работал? Zepto использует CSS3 для анимации.

Я бы попробовал что-то подобное в качестве первого предположения. Вам нужно будет выполнить обнаружение объектов вне метода animateLeft, потому что api анимации отличаются в jquery и zepto.

Может быть, что-то вроде этого (psuedocode): 

isTouchy = Modernizr.touch

var slideRight = function() {
    if (isTouchy) {
        Zepto('#carosel').animate(...)
    } else {
        jQuery('#carosel').slideRight() //sorry, don't know the api
    }
}

http://zeptojs.com/#animate

http://modernizr.com/

...