Prevent toggle animation on the initial update.

Author: gvtulder

src/ui/shared/ThreeWayToggle.ts

@@ -22,6 +22,7 @@ export class ThreeWayToggle {
     valueA: string;
     valueB: string;
     private _value!: ThreeWayValue;
+    private firstUpdate: boolean;
 
     private onchange?: (source: ThreeWayToggle) => void;
     private tapHandler: TapHandler;
@@ -40,6 +41,7 @@ export class ThreeWayToggle {
     ) {
         this.valueA = valueA;
         this.valueB = valueB;
+        this.firstUpdate = true;
 
         const toggle = createElement("div", "game-toggle threeway");
         this.element = toggle;
@@ -92,6 +94,10 @@ export class ThreeWayToggle {
     }
 
     set value(v: ThreeWayValue | string) {
+        if (!this.firstUpdate) {
+            this.element.classList.add("animated");
+        }
+        this.firstUpdate = false;
         let state = null;
         if (v == ThreeWayOption.OptionA || v == this.valueA)
             state = ThreeWayOption.OptionA;

src/ui/shared/Toggle.ts

@@ -15,6 +15,7 @@ export class Toggle {
     element: HTMLElement;
     private boxElement: HTMLElement;
     private _checked!: boolean;
+    private firstUpdate: boolean;
 
     private onchange?: (source: Toggle) => void;
     private tapHandler: TapHandler;
@@ -36,6 +37,7 @@ export class Toggle {
         iconEl.innerHTML = icon;
         iconEl.title = t(title);
 
+        this.firstUpdate = true;
         this.onchange = onchange;
         if (checked) {
             checked.then((value: boolean) => (this.checked = value));
@@ -58,6 +60,10 @@ export class Toggle {
     }
 
     set checked(state: boolean) {
+        if (!this.firstUpdate) {
+            this.element.classList.add("animated");
+        }
+        this.firstUpdate = false;
         this.element.classList.toggle("enabled", state);
         if (this._checked != state) {
             this._checked = state;

style/components/toggles.scss

@@ -54,9 +54,6 @@
     .toggle-box {
       background: transparent;
       height: calc($ball-width + max(0.3vw, 4px));
-      transition:
-        flex-shrink 100ms,
-        flex-grow 100ms;
     }
   }
   &.threeway .toggle-box.a {
@@ -67,6 +64,11 @@
     justify-content: flex-end;
     background: transparent;
   }
+  &.animated.threeway .wrap .toggle-box {
+    transition:
+      flex-shrink 100ms,
+      flex-grow 100ms;
+  }
 
   .toggle-ball {
     border-radius: 100%;
@@ -76,6 +78,8 @@
     box-shadow: var(--button-box-shadow);
     position: absolute;
     right: calc(100% - $ball-width - $toggle-box-padding);
+  }
+  &.animated .toggle-ball {
     transition: 100ms right;
   }