怎样用原生JS去实现jq的slideToggle呢？

Question

我的想法是，用定时器做高度变化，但是写出来之后发现效果并没有这么好啊，大家都有怎样的思路去实现呢

function upDown(targetObj,max,min,speed) {
    var timer;
    var myStyle = targetObj.style;
    if ( myStyle.display == 'none' ){
            myStyle.display = 'block';
            var newHeight = parseInt(myStyle.height);
            clearInterval(timer);
            timer = setInterval(function(){
                var newHeight = parseInt(myStyle.height);
                if ( parseInt(myStyle.height) == max ){
                    clearInterval(timer);
                }else{
                    myStyle.height = newHeight + speed + 'px';
                }
            },1000/60);
    }else{
        clearInterval(timer);
        timer = setInterval(function(){
            var newHeight = parseInt(myStyle.height);
            if ( parseInt(myStyle.height) == min ){
                clearInterval(timer);
                myStyle.display = 'none';
            }else{
                myStyle.height = newHeight - speed +'px';
            }
        },1000/60);
    }
    }

Answer 1

可以用CSS3 的transform跟transtion去做，
具体的就是先写好一个class，里面有一些元素的状态改变。
然后编写一个增加class跟删除class的操作就好了

Answer 2

楼上正解，jq的运动是一以前没有css3时代的运动，所以都要用js来写，现在用css3的属性写也可以实现，而且更简单

.要toggle对象的基本样式{
    overflow: hidden;
    height: 100px; //假如是100的高
    transition: all 1s;
}
.active{
    height: 0;
}

只要添加和删除active类就可以实现slideToggle了