Multiple transition animations associated with the same array

🚀 Feature Proposal?

When I add/remove an item from an array, I need to do transition animations on multiple DOM elements. Imagine children or elements on the same level. Right now this is not possible yet I guess.

  const transitions = useTransition(rows, {
    animation1: {
      from: { opacity: 0 },
      enter: { opacity: 1 },
      leave: { opacity: 0 }
    },
    animation2: {
      from: { transform: "translateX(50px)" },
      enter: { transform: "translateX(0)" },
      leave: { transform: "translateX(50px)" }
    }
  });

<ul>
  {transition((props, row) => (
    <animated.li style={props.animation1}>
        <animated.div style={props.animation2}>...</animated.div>
    </animated.li>
  ))}
</ul>

Example

I've prepared a Codesandbox, but of course I couldn't get it working:
Codesandbox

Start with the useTransition usage shown in the issue and inspect the linked Codesandbox, especially src/components/Rows.jsx. Determine how multiple DOM elements on the same array item should receive transition styles and whether the current API supports that shape. Done means the proposed example works for both animation1 and animation2, with behavior covered by an appropriate test or example.