📺 playsite: Remove slide back transition on navigation (#442)

When navigating to the next playground sample or lab challenge while on
the output view on mobile, we had this awkward: slide back to notes or
code first, than load new code. It seems more natural and intuitive to
just load the new contents - so for hashChange transition remove
animation by adding and eventually removing a CSS class that sets the
translate transition duration for the main container to 0 seconds.

Pull-request: #442

frontend/play/css/index.css

@@ -267,11 +267,14 @@ button.share > div {
   .main .editor-wrap {
     margin-top: 4px;
   }
+  .main.no-translate-transition {
+    transition: translate 0s;
+  }
 }
 
 @media (prefers-reduced-motion) {
   .main {
-    transition: translate 0s ease-in-out 0.1s;
+    transition: translate 0s;
   }
   .main.animate {
     animation: fadein 0.2s ease-in forwards;

frontend/play/index.js

@@ -480,7 +480,9 @@ function loadSession() {
 // If notes are available, navigates to the notes view.
 // If no notes but the editor is present, switches to the code view.
 // Otherwise, defaults to the output view
-function resetView() {
+async function resetView() {
+  const mainClassList = document.querySelector("main.main").classList
+  mainClassList.add("no-translate-transition")
   const showNotesBtn = document.querySelector("#show-notes")
   if (showNotesBtn) showNotesBtn.classList.add("hidden")
   if (!notesHidden) {
@@ -490,6 +492,9 @@ function resetView() {
   } else {
     setView("view-output")
   }
+  // sleep for 0.3 seconds, otherwise translate transition kicks in.
+  await new Promise((r) => setTimeout(r, 300))
+  mainClassList.remove("no-translate-transition")
 }
 
 function updateNotes(notes) {