Skip to content

Conversation

katerlouis
Copy link

@katerlouis katerlouis commented Jul 21, 2019

like discussed in #519 I passed down the status as a parameter to addEndListener, so when using SwitchTransition with javascript animations for dynamic components (which don't have a show variable) the addEndListener prop can decide which animation to run based on the current status. exiting or entering is being passed down in the following example:

<SwitchTransition mode={ "out-in" }>
  <Transition
    key={ questionObject.id }
    addEndListener={ (node, done, status) =>  {
        if (status === "exiting") {
          // dont know why, but the return seems necessary
          return TweenMax.to(node, 2, { yPercent: 100, onComplete: done })
        }
        if (status === "entering")
          return TweenMax.from(node, 2, { yPercent: 100, clearProps: "all", onComplete: done })
      }
    }
  >
    <Question
      questionObject={ questionObject }
      onChange={ (value) => setAnswer(currentQuestionId, value) }
    />
  </Transition>
</SwitchTransition>

One mistery remains to me, though:
When using it like this, I need to return the TweenMax, or it doesn't animate but jump to the value and still waits for the duration of the animation until the new one enters. The entering animation then really animates.

Any idea on what's happening here?

so when using SwitchTransition with javascript animations for dynamic components (which don't have a `show` variable) the addEndListener prop can decide which animation to run based on the current status. `exiting` or `entering` is being passed down in the following example:

```jsx
<SwitchTransition mode={ "out-in" }>
  <Transition
    key={ questionObject.id + "loool" }
    addEndListener={ (node, done, status) =>  {
        if (status === "exiting") {
          // dont know why, but the return seems necessary
          return TweenMax.to(node, 2, { yPercent: 100, onComplete: done })
        }
        if (status === "entering")
          return TweenMax.from(node, 2, { yPercent: 100, clearProps: "all", onComplete: done })
      }
    }
  >
    <Question
      questionObject={ questionObject }
      onChange={ (value) => setAnswer(currentQuestionId, value) }
    />
  </Transition>
</SwitchTransition>
```
@katerlouis
Copy link
Author

@jquense pi-pa-push :)

@katerlouis
Copy link
Author

katerlouis commented Aug 5, 2019

another push :) – is there a reason you haven't accepted this PR into the latest release from 3 days ago, @jquense?

@eightHundreds
Copy link

i need it

@danielhult
Copy link

@katerlouis Just curious cause I have the same problem. Did you ever solve this? Either with this library or a different way?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants