jQuery .css()中的CSS3转换

Question

当我将转换行添加到我的代码中时,它会破坏jQuery.我该如何解决？

a(this).next().css({
    left: c,
    transition: 'opacity 1s ease-in-out'
});

我正试图在滑块内设置从一个div到下一个div的淡入淡出

Answer 1

步骤1)删除分号,它是您正在创建的对象...

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out';
});

至

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out'
});

步骤2)供应商前缀......没有浏览器使用,transition因为它是标准,即使在最新的浏览器中,这也是一个实验性功能:

a(this).next().css({
    left             : c,
    WebkitTransition : 'opacity 1s ease-in-out',
    MozTransition    : 'opacity 1s ease-in-out',
    MsTransition     : 'opacity 1s ease-in-out',
    OTransition      : 'opacity 1s ease-in-out',
    transition       : 'opacity 1s ease-in-out'
});

这是一个演示:http://jsfiddle.net/83FsJ/

步骤3)更好的供应商前缀...您可以使用jQuery来决定使用哪个供应商前缀,而不是向元素添加大量不必要的CSS(浏览器只会忽略它):

$('a').on('click', function () {
    var myTransition = ($.browser.webkit)  ? '-webkit-transition' :
                       ($.browser.mozilla) ? '-moz-transition' : 
                       ($.browser.msie)    ? '-ms-transition' :
                       ($.browser.opera)   ? '-o-transition' : 'transition',
        myCSSObj     = { opacity : 1 };

    myCSSObj[myTransition] = 'opacity 1s ease-in-out';
    $(this).next().css(myCSSObj);
});?

这是一个演示:http://jsfiddle.net/83FsJ/1/

另请注意,如果您在transition声明中指定要设置动画opacity的left属性,则不会设置属性设置.

Answer 2

在处理CSS3转换时,您的代码可能会变得混乱.我建议使用jQuery Transit这样的插件来处理CSS3动画/过渡的复杂性.

此外,该插件使用webkit-transform而不是webkit-transition,它允许移动设备使用硬件加速,以便在动画发生时为您的Web应用程序提供本机外观.

JS Fiddle现场演示

使用Javascript:

$("#startTransition").on("click", function()
{

    if( $(".boxOne").is(":visible")) 
    {
        $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
        $(".boxTwo").css({ x: '100%' });
        $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
        return;        
    }

    $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
    $(".boxOne").css({ x: '100%' });
    $(".boxOne").show().transition({ x: '0%', opacity: 1.0 });

});

获得跨浏览器兼容性的大部分工作也是为您完成的,它就像移动设备上的魅力一样.