哪种方法好？用animate?

Question

假如

<div class="father">
    <div class="child">xxxxxx<div>
    
    
 </div>

点击一个buttom,
想要child translateX(-250px)

是用

$('.child').css('transform', 'translateX(-250px)')

还是

 $('.child').animate({}, function () {
            $('.child').css({
         'transform': 'translateX(-250px)'
            }),300
          }) 

还是

$('.father').addClass("test");

css写

    .test .child{
    transform: translateX(-250px)
    }

这三种方法哪个好？性能方面有区别么？

Answer 1

运行结果上来说1，3运行结果是一样的，都不会有过渡效果。2会有过渡效果。
所以1，3和2就没有性能上比较的必要了，再说1，3的性能，其实也没差别，都是 js执行修改css(js线程)->layout recalculate->GPU渲染

-------------response你的评论----------
我觉得首先你要明确下，你问这个问题的初衷，究竟是animate的性能真的成为你的瓶颈还是？我理解这两者方案的使用选择应该不是非黑即白的。
然后再回过头看下你的这个问题：
1.首先1，3与2的区别就在于jquery对于animate的实现方案是什么，究竟是使用了类似setInterval去设置css的方案，还是只是用animate包了一遍，底层还是动态添加对css的keyframes
2.如果是js setinterval或者queue的方案，从渲染发生的顺序来说，效率肯定是不如css3
3.jquery出现的时间是要比css3更早的，所以比较大可能性是用类似queue或者setInterval的方案
4.使用chrome的performance看下js的堆栈调用你就知道了，

建议：如果真的碰到性能上的问题，建议开下performance分析下性能卡点在哪，多数不会因为这两者的api调用区别导致的，基本都是使用上的问题