DTE :]

Sunday, May 5, 2013

Tes Dukungan CSS Transisi pada Peramban 

// http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr/13081497#13081497
var supportCSSTransitions = (function() {
    var s = document.createElement('p').style;
    return 'transition' in s ||
           'WebkitTransition' in s ||
           'MozTransition' in s ||
           'msTransition' in s ||
           'OTransition' in s;
})();

Penggunaan

Menambahkan kelas spesifik pada tag <html> berdasarkan dukungan CSS transisi pada peramban yang dipakai:

document.documentElement.className +=
    supportCSSTransitions ? " css-transition" : " no-css-transition";

Menggunakan animasi CSS transisi untuk performa yang lebih baik jika peramban yang dipakai mendukung CSS transisi, dan akan dialihkan ke jQuery .animate() jika peramban yang dipakai tidak mendukung CSS transisi:

if (supportCSSTransitions) {
    $('div').css({
        "top": 50,
        "left": 100
    });
} else {
    $('div').animate({
        "top": 50,
        "left": 100
    }, 1000);
}

Labels: ,

posted by Taufik Nurrohman at May 05, 2013

7 Comments:

Post a Comment



<< Home