SolidJS•2y ago

Disabling transition on load?

I have a sticky navbar lower in the page which uses an intersection observer to transition to another color when it reaches the top. But the problem is that there's a transition on page load, is there a smart SolidJS way to fix it?

2 Replies

suhaylmvOP•2y ago

  let container: any;
  const visible = createVisibilityObserver()(() => container);
  const stuck = () => !visible();

  return (
    <>
      <div ref={container} />
      <nav
        class={
          "sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold"
        }
        classList={{
          [stuck()
            ? "bg-secondary text-primary-light transition duration-1000 ease-out"
            : "bg-beige transition duration-1000 ease-out"]: true,
        }}
        id="navbar"
      >
        navbar content
</nav>
</>
)

  let container: any;
  const visible = createVisibilityObserver()(() => container);
  const stuck = () => !visible();

  return (
    <>
      <div ref={container} />
      <nav
        class={
          "sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold"
        }
        classList={{
          [stuck()
            ? "bg-secondary text-primary-light transition duration-1000 ease-out"
            : "bg-beige transition duration-1000 ease-out"]: true,
        }}
        id="navbar"
      >
        navbar content
</nav>
</>
)

Unknown User•2y ago

Message Not Public

Gaming

Programming

Disabling transition on load?