SolidJS•2mo ago

set signal batched intermediate sets are lost for animation

  createEffect(() => console.log(count()))

  set_count(undefined)
  set_count(3)

  set_count(5)

  createEffect(() => console.log(count()))

  set_count(undefined)
  set_count(3)

  set_count(5)

This logs only 5, but think about a scenario where I control the klasses of a div, with animation. first I want to reset the animation so I set the signal to undefined, then I set it to three to add the three klass, then five klass. how does this supposed to be done?

2 Replies

Madaxen86•2mo ago

In this case you want to use transitions: https://playground.solidjs.com/anonymous/5b1e6e5c-f4f8-4680-b0a4-a2d93832097f

import { render } from "solid-js/web";
import { createSignal,createEffect,startTransition } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count => count + 1);

  createEffect(()=>console.log(count()))

  const animate = async () => {
    await startTransition(()=>setCount(2))
    await startTransition(()=>setCount(3))
  }

  animate()

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

render(() => <Counter />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal,createEffect,startTransition } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count => count + 1);

  createEffect(()=>console.log(count()))

  const animate = async () => {
    await startTransition(()=>setCount(2))
    await startTransition(()=>setCount(3))
  }

  animate()

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

render(() => <Counter />, document.getElementById("app")!);

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

mdynnl•2mo ago

the most simplest solution that comes to mind is 1. to have a list of class that applies the css transition 2. then on transitionend, apply the next class if there's any or loop if desired like this https://playground.solidjs.com/anonymous/0eb3b059-e708-4f77-ba46-f3934e703b4b

Gaming

Programming

set signal batched intermediate sets are lost for animation