index.html.in: two transition fixes

First, the repositioning of the ticket also needs to be transitioned.
This makes the QR animation much smoother.

Second, it would seem that appending the "loaded" class (to enable
transitions) can retroactively affect style changes that were made
before the class was appended. The workaround for this is to do
something that makes the browser re-flow the affected elements, and I
guess calling focus() suffices to do that. So we add in a call to
focus() before appending the "loaded" class to the ticket and its
background; this ensures that the transitions are not enabled until
after the initial ticket sizing, as was always the intent.

diff --git a/index.html.in b/index.html.in
index e2b4b2a6eb051746306d87bb18daf0265e190243..a56adea2fc8c6edc069bac7b5ce42caabd573202 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -642,8 +642,15 @@
         }
 
         /* Enable CSS transitions for future scalings, namely
-         * for the QR focus animation. */
-        tbbg.setAttribute("class", "loaded");
+         * for the QR focus animation. The focus() thing here
+         * is a hack to force the browser to stop and think about
+         * the new transformations (defined above) BEFORE adding
+         * the class. Otherwise the "loaded" class can actually
+         * be added before the transformations are enabled,
+         * leading to transition effects! */
+        tbbg.focus();
+        t.classList.add("loaded");
+        tbbg.classList.add("loaded");
       }