Add event after transition out

src/game/common.ts

@@ -8,16 +8,30 @@ namespace game {
     handleInput(key: string): void;
     enter(): void;
     exit(): void;
+    transitionExit(): void;
   }
 
   export class ScreenManager {
     activeScreen: Screen | null = null;
+    lastScreen: Screen | null = null;
+    pendingExit: boolean = false;
 
-    constructor(readonly container: HTMLElement) {}
+    constructor(readonly container: HTMLElement) {
+      this.container.addEventListener('transitionend', (event: TransitionEvent) => {
+        if (this.pendingExit && event.propertyName === 'opacity') {
+          if (this.lastScreen !== null) {
+            this.lastScreen.transitionExit();
+            this.lastScreen = null;
+          }
+        }
+      });
+    }
 
     switchScreen(nextScreen: Screen): void {
       if (this.activeScreen != null) {
         this.container.classList.remove(this.activeScreen.name);
+        this.pendingExit = true;
+        this.lastScreen = this.activeScreen;
         this.activeScreen.exit();
       }
       this.activeScreen = nextScreen;

src/game/loading.ts

@@ -41,8 +41,11 @@ namespace game {
 
     finishLoading(): void {
       this.context.bgManager.setBackground(this.context.config.background);
-      let loadingElement = this.context.container.querySelector('#loading');
-      loadingElement.addEventListener('transitionend', (event) => this.switchToSelect());
+      let loadingElement: HTMLElement = this.context.container.querySelector('#loading');
+      loadingElement.addEventListener('transitionend', (event) => {
+        loadingElement.style.display = 'none';
+        this.switchToSelect()
+      });
       loadingElement.classList.add('finished');
     }
 
@@ -79,5 +82,7 @@ namespace game {
       containerStyle.setProperty('--base-color', config.baseColor);
       containerStyle.setProperty('--highlight-color', config.highlightColor);
     }
+
+    transitionExit(): void {}
   }
 }

src/game/select.ts

@@ -87,6 +87,8 @@ namespace game {
     exit(): void {
       this.folderController.listeners.detach();
     }
+
+    transitionExit(): void {}
   }
 
   class FolderSelectController {

src/game/typing.ts

@@ -65,6 +65,8 @@ namespace game {
     exit(): void {
       this.switchScreen(null);
     }
+
+    transitionExit(): void {}
   }
 
   class TypingLoadingScreen implements Screen {
@@ -124,6 +126,10 @@ namespace game {
     }
 
     exit(): void {}
+
+    transitionExit(): void {
+      this.barElement.style.width = '0%';
+    }
   }
 
   class TypingPlayingScreen implements Screen {
@@ -248,11 +254,16 @@ namespace game {
     }
 
     exit(): void {
+      if (this.context.track !== null) {
+        this.context.track.stop();
+      }
+    }
+
+    transitionExit(): void {
       if (this.context.track !== null) {
         this.kanaController.destroy();
         this.romajiController.destroy();
         this.progressController.destroy();
-        this.context.track.stop();
       }
     }
   }