CSS Transition相当于jQuery fadeIn（），fadeOut（），fadeTo（）

I have this

我有这个

$('#button1').click(function(){

    $('#header_bg').fadeTo(15, 0, function()
    {
        document.getElementById('header_bg').style.fill = '#FF0000';
    }).fadeTo('slow', 1);

    $('#header_text1').fadeOut(250);

    $('#header_text2').fadeIn(250);

});

I am trying to improve mobile performance (on iOS) of a jQuery heavy website. I have read iOS handles CSS transitions much better than jQuery. What is the best method of making these iOS friendly?

我正在努力提高jQuery重型网站的移动性能(在iOS上)。我已经阅读iOS处理CSS转换比jQuery更好。使这些iOS友好的最佳方法是什么?

4 个解决方案

#1

I've written loads about this (http://css3.bradshawenterprises.com) , but in short, you just add the transitions properties, then change the property.

我已经写了关于这个(http://css3.bradshawenterprises.com)的负载,但简而言之,您只需添加过渡属性,然后更改属性。

So, instead of $('#header_text1').fadeOut(250);, you'd use in your CSS:

所以,而不是$('#header_text1')。fadeOut(250);,你在CSS中使用:

-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;

, then in your JS,

,然后在你的JS中,

$('#header_text1').css({'opacity', 0});

If you want to run something when an animation has happened, there are events for transitionEnd that fire.

如果你想在动画发生时运行某些东西,那么有一些事件可以触发transitionEnd。

It's quite a different approach, but people have tried to bridge between JS and CSS in a few ways:

这是一种完全不同的方法,但人们试图通过以下几种方式在JS和CSS之间架起桥梁:

http://playground.benbarnett.net/jquery-animate-enhanced/ is a good link for this.

http://playground.benbarnett.net/jquery-animate-enhanced/是一个很好的链接。

#2

demo try this

演示尝试这个

@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.in, .out {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-duration: 705ms;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-duration: 705ms;        
}

.fade.out {
        z-index: 0;
        -webkit-animation-name: fadeout;
        -moz-animation-name: fadeout;
}

.fade.in {
        opacity: 1;
        z-index: 10;
        -webkit-animation-name: fadein;
        -moz-animation-name: fadein;
}

#3

CSS Transitions is the thing you are looking for,

CSS Transitions是您正在寻找的东西,

Here is a nice demo displaying a image fade effect: http://cssnerd.com/2012/04/03/jquery-like-pure-css3-image-fade-in/

这是一个很好的演示,显示图像淡入淡出效果:http://cssnerd.com/2012/04/03/jquery-like-pure-css3-image-fade-in/

here is some demo code:

这是一些演示代码:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function() {
                var change = true;
                $('#ba').click(function() {
                    if(change) {
                        $('#a').css('opacity', ' 0');
                        $('#b').css('opacity', '1');
                    } else {
                        $('#a').css('opacity', '1');
                        $('#b').css('opacity', '0');
                    }

                    change = !change;

                });
            });
        </script>
        <style>
            .fadeeffect {
                -webkit-transition: opacity 250ms ease-in-out;
                -moz-transition: opacity 250ms ease-in-out;
                -o-transition: opacity 250ms ease-in-out;
                transition: opacity 250ms ease-in-out;
            }               
        </style>
    </head>
    <body>

        <button type="button" id="ba" >
            Click Me!
        </button>

        <div>
            <p id="a"class="fadeeffect">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p id="b" class="fadeeffect">
                eafdsaf dsa dgsf dgadg dfg dagfadgLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </body>
</html>

#4

From the Rich Bradshaw's answer, an implementation of a fadeOut in jQuery with a callback would be:

从Rich Bradshaw的回答中,在jQuery中使用回调实现fadeOut将是:

// This function is an alternative to jquery fadeOut.
// jQuery fadeOut changes opacity gradually, forcing the browser to refresh the page each time.
// Using CSS transitions allows the browser to use GPU to render the page, which is much faster if the DOM is big.
jQuery.fn.fadeOut = function(callback) {
    let $selector = $(this[0]);
    $selector.addClass('fadeOut');
    $selector.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
    function(e){
        $selector.off(e);
        $selector.removeClass('fadeOut');
        $selector.css('display', 'none');
        $selector.css('opacity', 1);     // Revert back opacity since element is not displayed anymore
        if(typeof callback === 'function')
            callback();
    });
    $selector.css('opacity',0);
}

And of course .fadeOut:

当然.fadeOut:

.fadeOut {
    -webkit-transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -o-transition: opacity 1000ms ease-in-out;
    transition: opacity 1000ms ease-in-out;
}

You can then use as normally:

然后您可以正常使用:

$('#div').fadeOut(function() { console.log('done!') };

The same can be done with fadeIn.

fadeIn也可以这样做。

#1