单击按钮将div1移出屏幕，将div2从顶部移至20px时会弹出动画效果

Question

plz help thanks in advance...sorry for bad english ... want a animation effect with bouncing when div1 and div2 goes up and down

I have made main div in which there are 2 div... div1 and div2.

I want to make it like, when someone click on button.

That time div1 should slowly move out of the screen from top side with animation (slowly moving out of the top side screen).

And at the same time div2 should take a place 20px from top of screen.

I have setup almost everything but I'm not able to give it a animation effect no wonder why but transition effect or anything not working on it. I want to do it with JavaScript code if possible I less use jQuery or etc.

I am happy to use another approach, like instead of using margin-top to move div1 out of screen and div2 to top side if you recommend any other css or javascript, that's fine. I just want the animation effect in which slowly div1 and div2 move to top side.

 function myFunction1() { document.getElementById("div1").style.marginTop = "-110px"; document.getElementById("div2").style.marginTop = "20px"; } function myFunction2() { document.getElementById("div1").style.marginTop = "0px"; document.getElementById("div2").style.marginTop = "0px"; } 

 #main { background-color: grey; height: 1000px; width: 100%; margin: 0; padding: 0; } #div1 { background-color: red; height: 100px; width: 100%; margin-top: 0px; position: relative; } #div2 { background-color: green; height: 100px; width: 100%; margin-top: 0px; position: relative; } 

 <div id="main"> <div id="div1"> </div> <div id="div2"> </div> <button onclick="myFunction1()">Button 1</button> <button onclick="myFunction2()">Button 2</button> </div> 

Answer 1

Just add a CSS transition to your elements. You can change the parameters to taste. I believe this is the cleanest and most efficient solution.

EDIT: As per OP's request in the comments, I've shown an example of a transition function which emulates a slight "bounce" effect on the transition using extreme values. You can quickly create your own transition function and test it in real time using online tools (ex: cubic-bezier.com ) or the Chrome developer tools (you can click on a transition function for an element you are inspecting to edit the function in real time). Note that this functionality is currently not universally supported (see: Safari Bug 45761 )

Transitions on MDN

 function myFunction1() { document.getElementById("div1").style.marginTop = "-110px"; document.getElementById("div2").style.marginTop = "20px"; } function myFunction2() { document.getElementById("div1").style.marginTop = "0px"; document.getElementById("div2").style.marginTop = "0px"; } 

 #main { background-color: grey; height: 1000px; width: 100%; margin: 0; padding: 0; } /* *** THIS IS NEW *** */ #main div { -webkit-transition: margin 1s cubic-bezier(1,.7,.49,1.7); transition: margin 1s cubic-bezier(1,.7,.49,1.7); } /* *** END NEW *** */ #div1 { background-color: red; height: 100px; width: 100%; margin-top: 0px; position: relative; } #div2 { background-color: green; height: 100px; width: 100%; margin-top: 0px; position: relative; } 

 <div id="main"> <div id="div1"> </div> <div id="div2"> </div> <button onclick="myFunction1()">Button 1</button> <button onclick="myFunction2()">Button 2</button> </div>