refactor(transition): set style properties directly

Author: taocode

src/lib/headroom/index.svelte

@@ -22,7 +22,6 @@
 	let lastY = 0
 	let atTop = true
 	let atBottom = false
-	let style = `--duration:${duration}; --easing:${easing};`
 
 	validate({ duration, easing, tolerance, toleranceDown, toleranceUp, offset, offsetTop, offsetBottom })
 
@@ -37,7 +36,7 @@
 	})
 
 	function deriveClass(y = 0, scrolled = 0) {
-		if (y < offsetTop) return 'pin'
+		if (y < offsetTop) return headerClass
 		const up = scrolled > 0
 		if (!scrolled 
 			 || (
@@ -55,6 +54,14 @@
 		return result
 	}
 
+	/**
+   * @param {HTMLDivElement} node
+   */
+	function transitionSettings(node) {
+		node.style.transitionDuration = duration
+		node.style.transitionTimingFunction = easing
+	}
+
 	$: {
 		headerClass = updateClass(y)
 		atTop = y <= offsetTop
@@ -67,7 +74,7 @@
 </script>
 <svelte:window bind:scrollY={y} />
 <div
-	{style}
+	use:transitionSettings
 	class={headerClass}
 	class:bottom
 	class:atTop
@@ -78,14 +85,15 @@
 	class:hideAtBottom
 >
 	<slot />
+
 </div>
 
 <style>
 	div {
 		position: fixed;
 		width: 100%;
 		top: 0;
-		transition: transform var(--duration, 300ms) var(--easing, linear);
+		transition: transform 300ms linear;
 	}
 	.bottom {
 		top: auto;