Reactivity and CSS animations

[west sorrel]

Hi all and thanks for your time, I have this <For>

<For each={circles()}>
   {(circle, index) =>
      <Circle
         x={circle.x}
         y={circle.y}
         r={circle.r}
         id={circle.id}
         setSelected={setSelected}
        />
    }
</For>

And my Circle component is like this

...something...
 return (
    <div
      class={cn(styles.circle,
        'absolute cursor-pointer rounded-full bg-blue-300 duration-[1.5s] opacity-90 hover:bg-blue-600 hover:opacity-100 ease-in-out',
        local.class,
      )}
      style={{
        '--cx': `${local.x}px`,
        '--cy': `${local.y}px`,
        '--r': `${local.r}px`,
      }}
      onClick={(e) => {
        e.stopPropagation();
        local.setSelected(local.id)
      }}
    />

My css class is this one:

@keyframes enter {
  0% {
    transform: scale(0);

  }

  100% {

    transform: scale(1);
  }
}

.circle {
  --cx: 0px;
  --cy: 0px;
  --r: 0px;
  top: calc(var(--cy) - var(--r));
  left: calc(var(--cx) - var(--r));
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  transform-origin: center;
}

I would like every time I add a new circle to the circles' array only the new circle will have the animation written in the CSS file. But it seems that there is no way to do that without using some hack.

Am I doing something wrong?
Do you have any suggestions?

Thanks!

Reactivity and CSS animations

[crystal sequoia]

how are you setting circles?

slightly related but not an issue, you might wanna use stores for nested state for more fine-grained updates

actually, stores could be the answer, if you're updating every circle's position

then you'd be mapping a new item every time, and For would re-render every item as For uses referential equality to detect the change

also related, if you don't care about dom identity, Index also exists which only cares about what changed at a specific index (hence the name Index) whereas For would track the index(movement in array) for a specific item. also the reason why index is a signal in For where item is in Index

[west sorrel]

circles is a signal.

It is updated in a createEffect:

createEffect(() => {
    ...something...
    setCircles(currentStack());
  })

and that currentStack() is a signal too and it is set on every mouse click inside a div

const handleClick = {
...something...
setStack([
        ...currentStack(),
        {
          "...new circle..".
        },
      ]);
}

[west sorrel]

switch For with Index solved my issue