jQuery .css() 中的 CSS3 过渡

Posted 2023-03-06

【中文标题】jQuery .css() 中的 CSS3 过渡

【英文标题】：CSS3 transitions inside jQuery .css()

【发布时间】：2012-05-01 12:53:56

【问题描述】：

当我将过渡线添加到我的代码中时，它会破坏 jQuery。我该如何解决？

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

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

【问题讨论】：

你有 jquery 分配给 'a' 还是应该是 '$'

你是什么意思'打破'jQuery？

@Fresheyeball，当该行存在时，我的脚本根本不会运行。

【参考方案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 步） 更好的供应商前缀...与其向元素添加大量不必要的 CSS（只会被浏览器忽略），您可以使用 jQuery 来决定供应商前缀是什么使用：

$('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 属性将不会设置动画。

【讨论】：

等等，你删除了什么分号？

OP从代码中删除了分号，我将发布一个我正在谈论的示例。

@ScottB WebkitTransition 是 DOM 风格的语法，使用如下：document.getElementById('some-id').style.WebkitTransition = 'opacity 1s east-in-out';。 -webkit-transition 是 CSS 样式的语法。 jQuery 可以处理任何一种语法风格。

@Redtopia 我认为最好的情况是您通过功能检测而不是通过用户代理检测。 Modernizr 在这方面做得很好，允许您只使用当前浏览器支持的属性（或多个属性）。如果您对 Modernizr 感兴趣，请查看 prefixed 方法，当您传入标准属性名称时，它会为您提供正确的前缀属性名称。例如Modernizr.prefixed("transform") 在 webkit 浏览器中将返回 -webkit-transform。

到目前为止，Chrome 只识别 transition。

【参考方案2】：

在处理 CSS3 过渡时，您的代码会很快变得混乱。我会推荐使用诸如jQuery Transit 之类的插件来处理CSS3 动画/过渡的复杂性。

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

JS Fiddle Live Demo

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 );

);

获得跨浏览器兼容性的大部分艰苦工作也为您完成，它在移动设备上就像一个魅力。