问题
A question popped to mind answering to this one, where OP wanted to apply this transition:
test.css({transition: 'height 1s linear', height: '100px'});
And then to go back to this:
test.css({transition: 'none', height: '0px'});
He said he needed it to be done from js, and asked for a better idea, so I offered this approach:
test.animate({height: '100px'}, 1000, 'linear', function(){
test.css({transition: 'none', height: '0px'});
});
Here is my jsFiddle: https://jsfiddle.net/mqaunyvp/1/
@Matrix commented that JS and jQuery animations are less optimised than native CSS, which is right, but I think not on topic in that context.
So here is the question:
Is it right to accomplish this the way I suggested? Or would you advise against it? Why?
回答1:
A conclusion from all the comments:
jQuery was not created for animating objects, so it may be slow and laggy (depending on what and how much you're animating). But scrolling a page with jQuery's .animate() function for example works very good in most cases.
For more advanced animations (like moving objects or doing complex or many animations at the same time), use libraries as velocity.
If you just want to animate text style/color or a slide-down menu, it's faster (and easier IMO) to use CSS transitions/animations.
So it depends on what you're doing. Hope this helps!
来源：https://stackoverflow.com/questions/37445661/should-i-use-avoid-jquery-animate