website_next: part 2

website_next/explore/chain/transition.js

@@ -0,0 +1,32 @@
+/**
+ * @param {Element} element
+ * @param {string} property
+ */
+export function transitionMs(element, property) {
+  const style = getComputedStyle(element);
+  const properties = style.transitionProperty.split(",").map((part) => {
+    return part.trim();
+  });
+  const durations = parseCssTimes(style.transitionDuration);
+  const delays = parseCssTimes(style.transitionDelay);
+  const index = properties.findIndex((part) => {
+    return part === property || part === "all";
+  });
+
+  if (index < 0) return 0;
+
+  const duration = durations[index] ?? durations.at(-1) ?? 0;
+  const delay = delays[index] ?? delays.at(-1) ?? 0;
+
+  return duration + delay;
+}
+
+/** @param {string} value */
+function parseCssTimes(value) {
+  return value.split(",").map((part) => {
+    const time = part.trim();
+    const amount = Number.parseFloat(time);
+
+    return time.endsWith("ms") ? amount : amount * 1_000;
+  });
+}