Created
June 1, 2021 12:50
-
-
Save NaiveGeeek/815ad5c656e613f0e46d8b8e40a2e60d to your computer and use it in GitHub Desktop.
trying to do flip animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head></head> | |
| <style> | |
| .square { | |
| height: 100px; | |
| width: 100px; | |
| margin: 10px; | |
| } | |
| </style> | |
| <body> | |
| <button onclick="shuffleboxes()">shuffle boxes</button> | |
| <div id="container"> | |
| <div class="square" style="background-color: aqua"></div> | |
| <div class="square" style="background-color: black"></div> | |
| <div class="square" style="background-color: blue"></div> | |
| <div class="square" style="background-color: blueviolet"></div> | |
| <div class="square" style="background-color: brown"></div> | |
| <div class="square" style="background-color: burlywood"></div> | |
| <div class="square" style="background-color: chartreuse"></div> | |
| <div class="square" style="background-color: chocolate"></div> | |
| <div class="square" style="background-color: cornflowerblue"></div> | |
| <div class="square" style="background-color: darkgreen"></div> | |
| <div class="square" style="background-color: deeppink"></div> | |
| <div class="square" style="background-color: indianred"></div> | |
| </div> | |
| </body> | |
| <script> | |
| let list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; | |
| function shuffle(array) { | |
| for (let i = array.length - 1; i > 0; i--) { | |
| let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i | |
| // swap elements array[i] and array[j] | |
| // we use "destructuring assignment" syntax to achieve that | |
| // you'll find more details about that syntax in later chapters | |
| // same can be written as: | |
| // let t = array[i]; array[i] = array[j]; array[j] = t | |
| [array[i], array[j]] = [array[j], array[i]]; | |
| } | |
| } | |
| const allElements = document.getElementsByClassName("square"); | |
| function shuffleboxes() { | |
| const prevSize = []; | |
| const newSize = []; | |
| for (let i = 0; i < allElements.length; i++) { | |
| prevSize.push(allElements[i].getBoundingClientRect()); | |
| } | |
| shuffle(list); | |
| for (let i = 0; i < list.length; i++) { | |
| newSize.push(allElements[list[i]].getBoundingClientRect()); | |
| } | |
| for (let i = 0; i < newSize.length; i++) { | |
| const deltaX = prevSize[i].left - newSize[i].left; | |
| const deltaY = prevSize[i].top - newSize[i].top; | |
| console.log(newSize[i].top, prevSize[i].top, deltaY, list[i]); | |
| requestAnimationFrame(() => { | |
| allElements[ | |
| i | |
| ].style.transform = `translate(${deltaX}px, -${deltaY}px)`; | |
| allElements[i].style.transition = "transform 0s"; | |
| requestAnimationFrame(() => { | |
| // allElements[i].style.transform = ""; | |
| allElements[i].style.transition = "transform 5000ms"; | |
| }); | |
| }); | |
| } | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment