1，css3动画性能高于js动画原因

    css3的 transform 属性 将使dom单独为一个层，重渲染时只要改变该层，再合并图层

    而js的动画可能同时涉及多个层，当页面复杂时，重渲染非常消耗性能

2，关键代码

    transition: all 0.5s ease-out;

    所有属性改变进行0.5s的延时变化，使用缓出的缓动公式来进行补间动画

3，所有代码

html：

css

.page-5{  position: absolute;  top: 400%;  overflow: hidden;  .slide-box{    width: 400%;    transition: all 0.5s ease-out 0s;    .img-box{      width: 25%;      height: 100%;      display: inline-block;      img{        width: 101%;        height: auto;      }    }  }  .left-icon{    position: absolute;    top:45%;    left:5%;    width: 1.3rem;    height: 2.4rem;    background: url('../images/left-icon.png') no-repeat;    background-size: contain;    display: none;  }  .right-icon{    position: absolute;    top:45%;    right:5%;    width: 1.3rem;    height: 2.4rem;    background: url('../images/right-icon.png') no-repeat;    background-size: contain;    display: none;  }  .active{    .left-icon{      display: block;    }    .right-icon{      display: block;    }  }  .slide-option-box{    position: absolute;    top: 90%;    left:48%;    div{      background: url('../images/no_active.png') no-repeat;      background-size: cover;      width: 0.8rem;      height: 0.8rem;      display: inline-block;    &.active{      background: url('../images/active.png') no-repeat;      background-size: cover;      }    }  }}

js部分

var slide = function(){    var index = 0;    var oldIndex = 0;    var lastIndex = 0;    var width = document.body.clientWidth;    var left = 0;    var dir = 0;    var timeout = 0;    var dom = document.getElementsByClassName('slide-box')[0];    var options = document.getElementsByClassName('slide-option-box')[0].getElementsByTagName('div');    var imgLists = document.getElementsByClassName('img-box');    var leftList = document.getElementsByClassName('right-icon');    var rightList = document.getElementsByClassName('left-icon');    for(var i=0;i
    
     2){            index = 0;            left = 0;        }        options[index].className = 'active';        imgLists[index].className = 'img-box active';        lastIndex = index;        slideStep();    }    function slideStep(){        left = (index) * width;        dom.setAttribute('style','margin-left:-'+left+'px;');        if(dir > 0){            if(left >= width * (index)){                timeout = setTimeout(function(){                    slideChange(1);                },5000);                return;            }        }else{            if(left <= width * (index)){                timeout = setTimeout(function(){                    slideChange(1);                },5000);                return;            }        }    }    slideChange(1);};slide();