RequestAnimationFrame - down and up

Tentativa de fazer o mesmo efeito que o menu DropDown do OneDrive

by Wesley Moraes

HTML

<div id="contentContainer">
     <div id="thing" class="circle"></div>
</div>

CSS

body{
            background-color: white;
            margin: 30px;
            margin-top: 10p;
        }
        #contentContainer {
            width: 550px;
            height: 650px;
            border: 5px black solid;
            overflow: hidden;
            background-color: seagreen;
            position: relative;
        }
        #thing{
            position: absolute;
            left: 150px;
            top: 75px;
        }
        .circle{
            
            width: 200px;
            height: 200px;
            background-color: lightyellow;
            
        }

JavaScript

var count = 0;
        var theThing = document.querySelector('#thing');
        var currentPos = 0;
        var requestAnimationFrame = window.requestAnimationFrame ||
                                    window.mozRequestAnimationFrame ||
                                    window.webkitRequestAnimationFrame ||
                                    window.msRequestAnimationFrame;
        
        
        status = true;
        var globalId;
        theThing.onclick = function(){
            //alert(status);
            if(status){
                moveThing();
                status = false;
            }else{
                //alert("lo");
                moveThing2();
                status = true;
            }
        }
        
        function moveThing(){
            currentPos += 45;
            
            theThing.style.top = currentPos + "px";
                if(currentPos < 280){
                    globalId = requestAnimationFrame(moveThing);
                }else{
                    window.cancelAnimationFrame(globalId);
                    //if(!status){ moveThing2(); status = false; alert("ok");}
                    // else moveThing2();
                }
        }
        function moveThing2(){
            //alert('ok');
            currentPos -= 45;
            theThing.style.bottom = currentPos + "px";
                if(currentPos > 0){
                    requestAnimationFrame(moveThing2);
                }//else{
                    //window.cancelAnimationFrame(globalId);
                    //status = true;
               // }
        }