doc_mutations_fast.html (964B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 div { 7 background-color: lime; 8 height: 20px; 9 opacity: 1; 10 transition: 0.5s opacity; 11 } 12 13 .transition { 14 opacity: 0; 15 } 16 </style> 17 </head> 18 <body> 19 <div></div> 20 <div></div> 21 <div></div> 22 <div></div> 23 <div></div> 24 <div></div> 25 <div></div> 26 <div></div> 27 <div></div> 28 <div></div> 29 30 <script> 31 "use strict"; 32 33 // This function is called from test. 34 // eslint-disable-next-line 35 async function startFastMutations() { 36 const targets = document.querySelectorAll("div"); 37 38 for (let i = 0; i < 10; i++) { 39 for (const target of targets) { 40 target.classList.toggle("transition"); 41 await wait(15); 42 } 43 } 44 } 45 46 async function wait(ms) { 47 return new Promise(resolve => { 48 setTimeout(resolve, ms); 49 }); 50 } 51 </script> 52 </body> 53 </html>