JQuery / WebKit / CSS переходы для кросс-браузерной анимации панели - PullRequest
Новая
       5

JQuery / WebKit / CSS переходы для кросс-браузерной анимации панели

1 голос
/ 14 апреля 2011

Как заядлый пользователь JQuery, я был встревожен, когда в админ-панели на iOS эффекты, такие как слайд, были медленными и рывками в отличие от родного программного обеспечения iOS.

Я обнаружил несколько мобильных библиотек, включая JQuery mobile и JQtouch.,Однако ни один из них не поддерживает кросс-браузер.

Это способ использовать мои существующие эффекты JQuery по умолчанию для мобильной версии, если он обнаруживает браузер iOS.И было бы возможно для краткого объяснения того, как это работает.

Большое спасибо,

Чудесный

Ответы [ 2 ]

1 голос
/ 14 апреля 2011

Я использую такой код: 

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

Тогда для простых случаев: 

animate($("#someID"),{"left":"100px"});

или для сложных, которые требуют префикса поставщика: 

var cssArgs = {};
cssArgs[vP+"transform"] = "translate(100px,0px)";

animate($("#someID"),cssArgs);

Если я делаю скольжение, я бы рекомендовал использовать transform3d и translate of say (100px, 0,0). На iOS это будет аппаратно ускорено.

Я использую Modernizr, чтобы проверить, что я могу сделать, с чем-то вроде этого: 

function slide(gallery_chunk, sliderWidth) {
    if (Modernizr.csstransforms3d && Modernizr.csstransitions) {
        var cssArgs = {};
        cssArgs[vP+"transform"] = "translate3d("+gallery_chunk*-sliderWidth+"px,0px,0px)";

        animate($("#gallery_content #thumbnails"),cssArgs);
    } else if (Modernizr.csstransforms && Modernizr.csstransitions) {
        var cssArgs = {};
        cssArgs[vP+"transform"] = "translate("+gallery_chunk*-sliderWidth+"px,0px)";

        animate($("#gallery_content #thumbnails"),cssArgs);
    } else {
        animate($("#gallery_content #thumbnails"),{"left":gallery_chunk*-sliderWidth+"px"});            
    }   
}

Этот пример взят из ползунка изображения, поэтому я отправляю ему ширину и порцию (т. Е. Страницы 0,1 или 2).

Надеюсь, это даст вам некоторые идеи!

0 голосов
/ 14 апреля 2011

Я не знаю супер-легкий способ сделать это. Но вы можете использовать modernizr , чтобы выяснить, подходит ли браузер для CSS-переходов, а затем сделать что-то вроде этого: 

function slideMeUp(elementID) {
    if (Modernizr.csstransitions) {
        $(elementID).removeClass('slidDown').addClass('slidUp');
    } else {
        $(elementID).slideUp(500);
    }
}

И тогда в css происходит волшебство, которое становится немного излишним, но должно сработать. Преимущество использования свойств transition-transform-scale заключается в том, что он действительно ДЕЙСТВИТЕЛЬНО работает на iOS. 


.sliders  {
  -moz-transition: -moz-transform 0.5s ease-out;  /* FF4+ */
  -o-transition: -o-transform 0.5s ease-out;  /* Opera 10.5+ */
  -webkit-transition: -webkit-transform 0.5s ease-out;  /* Saf3.2+, Chrome */
  -webkit-transform-origin: 50% 0%;  /* halfway across, at the top */
  -moz-transform-origin: 50% 0%;  /* halfway across, at the top */
  -o-transform-origin: 50% 0%;  /* halfway across, at the top */
  transition: transform 0.5s ease-out;  
  transform-origin: 50% 0%;  /* halfway across, at the top */
}
.slidUp {
    -webkit-transform: scale(1,0);  /* full width, zero height */
    -moz-transform: scale(1,0);  /* full width, zero height */
    -o-transform: scale(1,0);  /* full width, zero height */
    transform: scale(1,0);  /* full width, zero height */
}

.slidDown {
    -webkit-transform: scale(1,1);  /* full width, full height */
    -moz-transform: scale(1,1);  /* full width, full height */
    -o-transform: scale(1,1);  /* full width, full height */
    transform: scale(1,1);  /* full width, full height */
}
...