Использование Modernizr.prefixed в jQuery .animate

Question

Я плохо разбираюсь в синтаксисе jQuery, поскольку PHP - это моя вещь.

Я пытаюсь создать анимацию jQuery, но с правильными префиксами поставщиков по нескольким значениям, но мое понимание использования Modernizr.prefixed подводит меня.

То, что я пытаюсь получить что-то вроде:

$('.rightbox3d').animate({ 
     opacity: 1 
     ,top:"60px" 
     ,Modernizr.prefixed('transform'):"translateY(-200px)" 
     ,Modernizr.prefixed('scale'):2 
    }, 4000); 

то есть. Я хочу включить префиксы поставщика в список анимированных стилей, но я получаю синтаксическую ошибку - неожиданный токен.

Я пробовал использовать var transformProperty = Modernizr.prefixed? Modernizr.prefixed ('transform'): 'transform'; , но он разрешает только один тип , т. Е. $ (". Rightbox3d"). Animate (transformProperty, "translateY (-200px)"); когда то, что я хочу несколько стилей, таких как преобразование, прозрачности, масштаба и т.д.

Я заметил, что эта строка коды не имеет фигурные скобки скобки вокруг transformProperty части, в то время как список делает например. . $ ('rightbox3d') анимация ({ непрозрачности: 1 , вверху: "- 200px" }, 4000, функция() {. // Анимация полной });

, но я просто не могу обогнуть его. Может ли кто-нибудь помочь?

Answer 1

Итак, вам придется совершить большой прыжок с головы. Переходы CSS отличаются от jQuery.animate.

Вот хорошее введение по этому вопросу. https://www.webkit.org/blog/138/

Итак, сначала давайте признаем, что мы не можем сделать то же самое, больше

if (!Modernizr.csstransitions || Modernizr.csstransforms3d) { 
    // use some css 
} else { 
    // use some jQuery 
} 

Теперь давайте заливать ваш пример

if (!Modernizr.csstransitions || !Modernizr.csstransforms3d) { 
    // Old jQuery version 
    $('.rightbox3d').animate({ 
    opacity: 1, 
    top: "-200px", 
    width: 2 * $('.rightbox3d').width(), 
    height: 2 * $('.rightbox3d').height() 
    }, 4000); 
} else { 
    // Modern cool version 
    // The transform is moving/rotating/stretching we want to do 
    // The transition is the animation we want 
    $('.rightbox3d').css({ 
    opacity: 1, 
    transform: 'translateY(-200px) scale(2)', 
    transition: 'all 4000ms ease-in-out' 
    }); 
} 

Я думаю, что должен очистить его для тебя. :)