shuffle.html (671B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <head> 4 <style> 5 6 #s { 7 position: relative; 8 view-transition-name: wrapper; 9 border: 5px solid lightgrey; 10 height: 200px; 11 width: 250px; 12 } 13 .i { 14 position: relative; 15 width: 150px; height: 60px; 16 border: 5px solid #ace; 17 } 18 ::view-transition-group(*), 19 ::view-transition-old(*), 20 ::view-transition-new(*) { animation: unset; } 21 22 </style> 23 </head> 24 <body> 25 <div id="s"> 26 <div class="i">A</div> 27 <div class="i">B</div> 28 </div> 29 <script> 30 31 onload = async () => { 32 await s.startViewTransition(() => { 33 s.appendChild(s.children[0]); 34 }).finished; 35 document.documentElement.classList.remove('test-wait'); 36 } 37 38 </script> 39 </body> 40 </html>