1

Есть сайт написанный с использованием AngularJS и анимация на JS.
В анимации используется transform ,а как мы знаем без вендорных префиксов не во всех браузерах будет работать.

На сколько я знаю jquery сам определяет и подставляет нужный префикс при добавлении стиля, но не хочется подключать jquery, только из-за этого, хватает и jqLite.
Так же не хочется писать все префиксы сразу при добавлении стиля через jqLite.

Может кто знает как это сделано в jquery?

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

3
  • Вы transition указываете в CSS, верно? По крайне мере, я так делаю для angular анимации.
    – romeo
    25 окт 2015 в 19:46
  • @romeo, нет там CSS указывается через jqLite (angular.element), там анимация посложнее и сделано не через angular анимацию.
    – Mr_Epic
    25 окт 2015 в 19:57
  • 1
    Кто-нибудь знает) В jQuery использован примерно такой же метод как и у меня в ответе, просто я его упростил для частного случая. Ответ дополнил описанием того как это делается в jQuery.
    – Rolandius
    26 окт 2015 в 12:37

2 ответа 2

2

Один из способов - проверить у элемента наличие нужного свойства с префиксом (или без):

function getTransformType() {
    var div = document.createElement('div');
    var types = ['transform', 'MozTransform', 'WebkitTransform', 'какие там еще нужны'];
    for (var i = 0; i < types.length; ++i) {
        if (typeof div.style[types[i]] != 'undefined') {
            return types[i];
        }
    }
    return null;
}

jQuery делает проверку похожим образом. Там хранится массив:

cssPrefixes = [ "Webkit", "O", "Moz", "ms" ];

Перед тем как применять на элементе свойство, там выполняется поиск правильного имени:

// Return a css property mapped to a potentially vendor prefixed property
function vendorPropName( style, name ) {
    // Shortcut for names that are not vendor prefixed
    if ( name in style ) {
        return name;
    }

    // Check for vendor prefixed names
    var capName = name[0].toUpperCase() + name.slice(1),
        origName = name,
        i = cssPrefixes.length;

    while ( i-- ) {
        name = cssPrefixes[ i ] + capName;
        if ( name in style ) {
            return name;
        }
    }
    return origName;
}

Эта функция возвращает "правильное" свойство. Суть точно такая же как я описал выше. Окончательно имя свойства там выбирается так:

name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );

То есть они кэшируют запросы, чтобы каждый раз не тестить, на необходимость префикса.

3
  • Спасибо большое за такой подробный ответ, даже разобрали как это сделано в jQuery, ещё раз спасибо.
    – Mr_Epic
    26 окт 2015 в 12:46
  • И да, у вас функция не рабочая в типах не должно быть transform, так как он всегда будет. Убираем его из массива и заменяем return null; на return 'transform'; ;)
    – Mr_Epic
    26 окт 2015 в 13:52
  • 1
    @Mr_Epic, transform будет не всегда, а будет он, когда свойство работает без префикса. return null; нужен для того, чтобы сказать, что поддержки нету, например, если это ie9.
    – Rolandius
    26 окт 2015 в 13:57
0
  1. transform уже давно работает без префиксов, кроме сафари.
  2. Можно перечислить нужные префиксы - в css от них хуже не будет.
  3. Если речь не о css, а об обработчике завершения анимации, то там делать гораздо хитрее надо, потому что вполне могут вызваться несколько - с префиксом и без.
1
  • 1) сафари как раз мне и нужно :) 2)Анимация на JS 3)Анимация элемента получается за счёт изменения transform у элемента(через JS).
    – Mr_Epic
    26 окт 2015 в 13:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.