How to make div slide animation using onclick Javascript
Question
I want the whole div to slide left after onclick, to be honest i have no clue what's wrong with my code :/ I'm also going to add when you click it again it goes back to regular position but i really need to figure out how i'm going to get the slide animation. It's the first time i'm using the animationName property. I want to do it in JavaScript and not JQuery.
function function1(){ document.getElementById("front_page_blur").style.animationName = "slide"; }
body{ background-color:blue; } .front_page_blur{ margin: auto; width: 700px; height: 425px; background-color: rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 20px 9px black; } #front_page_blur{ transition: 1s ease; animation: 2s; } .button { margin-left: 40px; margin-right: 40px; margin-top: 35px; text-align: center; width: 150px; height: 150px; border-radius: 10%; display: inline-block; } #button1_text { color: white; font-family:Arial Black; padding-top: 10px; } #button1{ background-color: rgba(0, 191, 255, 0.3); z-index:2; transition: background-color 0.3s ease-out; } #button1:hover { background-color:rgba(0, 191, 255, 0.5); transition: background-color 0.3s ease-in-out; } @keyframes slide { from { left: 0px;} to { left: 200px;} }
<body> <div class="front_page_blur" id="front_page_blur"> <h1 class="welcomeMSG">Welcome To TheFunction</h1> <h1 class="welcomeMSG" id="welcomeMSG_U">Choose Your Destination</h1> <div class="button" id="button1" onclick="function1()"> <p id="button1_text">Animation</p> </div> </div> </body>
1 answers
solution1
2 ACCPTED 2015-08-28 18:44:41
Note that left is for absolute positioned elements. Try with margin-left instead:
@keyframes slide {
from { margin-left: 0px;}
to { margin-left: 200px;}
}
Check this for a quick tutorial on CSS animations. It could be useful on your task.
UPDATE
The following code have some changes, what i mentioned earlier, and also the way you call the CSS animation from javascript.
function function1(){ document.getElementById('front_page_blur').classList.add('slideAnim'); }
body{ background-color:blue; } .front_page_blur{ margin: auto; width: 700px; height: 425px; background-color: rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 20px 9px black; } .slideAnim { animation-name: slide; animation-duration: 2s; } .button { margin-left: 40px; margin-right: 40px; margin-top: 35px; text-align: center; width: 150px; height: 150px; border-radius: 10%; display: inline-block; } #button1_text { color: white; font-family:Arial Black; padding-top: 10px; } #button1{ background-color: rgba(0, 191, 255, 0.3); z-index:2; transition: background-color 0.3s ease-out; } #button1:hover { background-color:rgba(0, 191, 255, 0.5); transition: background-color 0.3s ease-in-out; } @keyframes slide { from { margin-left: 0px;} to { margin-left: 200px;} }
<body> <div class="front_page_blur" id="front_page_blur"> <h1 class="welcomeMSG">Welcome To TheFunction</h1> <h1 class="welcomeMSG" id="welcomeMSG_U">Choose Your Destination</h1> <div class="button" id="button1" onclick="function1()"> <p id="button1_text">Animation</p> </div> </div> </body>
However, this kind of animation will only work the fist time. Then you need to find a way to restart it when you want it again (a trick could be remove the element from the page entirely and re-insert it).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.