Having trouble applying motion-ui-pack to swapping components

[ajmajma]

Hello, I am trying to apply your module to add a little animation to my react app here. I have a little function that swaps the child component shown based on a local state variable and I can't seem to get it to work. So I just have -

     <Transition
          component={false}
          measure={false}
          enter={{
            opacity: 1,
          }}
          leave={{
            opacity: 0
          }}>
              {this.renderQuiz(step)}
          </Transition>

inside of my render. The renderQuiz is just a function that has a switch statement that swaps the component shown based on a local component state in this wrapping parent component. For reference, it just looks like so -

renderQuiz(step) {
  switch (step) {
    case 0:
      return (
        <StepZero  key="Step1"/>
      );
    case 1:
      return (
        <StepOne  key="Step2"/>
      );
 ....

The component swap fine but I am seeing no animation, there is about a 1 second pause between these components showing themselves though. I see you are passing style when you render components inside transition so inside I have style={this.props.style} on the outer most div (thinking this might be the problem) but I am still not seeing the animations. Would appreciate any help in fixing this. Thanks!!

[NourSammour]

@ajmajma did you solve this issue?

[schnubor]

I'm interested in that exact same issue as well.

[nocategory]

Hey, I had the same issue and ended up fixing it by wrapping a div around the component(s). Seems like it will only work with inline JSX using {condition && }. Give it a try and let me know if it helped you. 😄

Edit: Just tried it with a span aswell, and it worked fine so I guess any HTML element wrapping the component would work

[eenagy]

I have the exact same problem. Wrapping in a div solves it, though not when using component="div".

[mightym]

I'm having the same issues. Using something like this:

<div key='a'><FlyOut  orders={this.state.shipped} /></div>

instead of:

<FlyOut key='a'  orders={this.state.shipped} />

works for the component.

Also I'm a bit confused why I need to pass in a key to get it working. Its just a single component. not a array of several components/elements.