Renderprops components are not animating in 9 beta.

[QuietNoise]

🐛 Bug Report

When you use Transition, Trail, Spring components (and possibly others too) with React Spring 9 beta to animate DOM elements the animations are not applied (DOM elements do not have the style attribute applied).

To Reproduce

1. Wrap an element to animate with a Transition component and appropriate arguments for animation. Apply animation arguments to the style attribute of the element to animate. For example:

   <Transition
       items={show}
       from={{ opacity: 0 }}
       enter={{ opacity: 1 }}
       leave={{ opacity: 0 }}
     >
       {show => show &&
         (props => (
           <div style={props}>
             <span role="img" aria-label="peace">✌</span>
           </div>
         ))
       }
   </Transition>

2. In you app generate event that will negate value of the 'show' variable.
3. Observe the DOM element being removed/added with delay but without style attribute applied and thus without animations.

Expected behavior

I would expect the style attribute to be applied in a same way it works in version 8.

Link to repro (highly encouraged)

Bug example with v9.beta.31 https://codesandbox.io/s/transition-in-beta-odwx2 When you click on the Toggle Visibility button you can see the peace emoji is not animated.

Exact same example but with v.8.0.27, works as expected. https://codesandbox.io/s/transition-in-stable-zifvq

Environment

• react-spring v9.beta.31
• react v16.8.6

[QuietNoise]

Inspired by @aleclarson 's comment https://github.com/react-spring/react-spring/issues/738#issuecomment-509045777 to another issue, I wrapped the div component with animated factory and animations are now working as expected.

<Transition
        items={showOrNot}
        from={{ opacity: 0 }}
        enter={{ opacity: 1 }}
        leave={{ opacity: 0 }}
      >
        {show =>
          show &&
          (props => (
            <animated.div style={props}>
              <span role="img" aria-label="peace">
                ✌
              </span>
            </animated.div>
          ))
        }
</Transition>

Updated working sandbox: https://codesandbox.io/s/transition-in-beta-with-animated-factory-5ppzk Probably can close this particular issue?

I shall mention that the necessity to wrap components with animated factory is not mentioned anywhere in the manual about Render-props API i.e. in here https://www.react-spring.io/docs/props/transition animated factory is not used in quoted code snippets. It's also worth mentioning that everything works without animated factory in v.8 of the react-spring library.

[aleclarson]

In v8, the renderprops API re-renders its children on every animation frame. In v9, since the renderprops API now runs on top of the hooks API, you need to use animated.div instead of a plain div. I'll be sure to update the docs about this before releasing v9. Thanks! 👍

[mario-jerkovic]

Inspired by @aleclarson 's comment #738 (comment) to another issue, I wrapped the div component with animated factory and animations are now working as expected.

<Transition
        items={showOrNot}
        from={{ opacity: 0 }}
        enter={{ opacity: 1 }}
        leave={{ opacity: 0 }}
      >
        {show =>
          show &&
          (props => (
            <animated.div style={props}>
              <span role="img" aria-label="peace">
                ✌
              </span>
            </animated.div>
          ))
        }
</Transition>

Updated working sandbox: https://codesandbox.io/s/transition-in-beta-with-animated-factory-5ppzk Probably can close this particular issue?

I shall mention that the necessity to wrap components with animated factory is not mentioned anywhere in the manual about Render-props API i.e. in here https://www.react-spring.io/docs/props/transition animated factory is not used in quoted code snippets. It's also worth mentioning that everything works without animated factory in v.8 of the react-spring library.

This "working" example is still not working, event with the latest rc.