CSS3 transitions inside jQuery .css()

后端 未结 2 502
既然无缘
既然无缘 2020-12-08 01:07

When I add the transition line into my code it breaks jQuery. How can I fix it?

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


        
相关标签:
2条回答
  • 2020-12-08 01:42

    Your code can get messy fast when dealing with CSS3 transitions. I would recommend using a plugin such as jQuery Transit that handles the complexity of CSS3 animations/transitions.

    Moreover, the plugin uses webkit-transform rather than webkit-transition, which allows for mobile devices to use hardware acceleration in order to give your web apps that native look and feel when the animations occur.

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

    Most of the hard work of getting cross-browser compatibility is done for you as well and it works like a charm on mobile devices.

    0 讨论(0)
  • 2020-12-08 02:03

    Step 1) Remove the semi-colon, it's an object you're creating...

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

    to

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

    Step 2) Vendor-prefixes... no browsers use transition since it's the standard and this is an experimental feature even in the latest browsers:

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

    Here is a demo: http://jsfiddle.net/83FsJ/

    Step 3) Better vendor-prefixes... Instead of adding tons of unnecessary CSS to elements (that will just be ignored by the browser) you can use jQuery to decide what vendor-prefix to use:

    $('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);
    });​
    

    Here is a demo: http://jsfiddle.net/83FsJ/1/

    Also note that if you specify in your transition declaration that the property to animate is opacity, setting a left property won't be animated.

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题