Semantic-ui-react: <Transition /> Component

[levithomason]

http://semantic-ui.com/modules/transition.html

[layershifter]

@levithomason Any ideas about this component? It's required by <Dimmer>, <Message>, <Modal> and many other components.

[levithomason]

Correct, in thinking this will end up more of a util than a component. I'd like to reuse Semantic UI CSS transitions. I made a proof of concept of this for the Dropdown. See Dropdown/Todo.md for the notes.

My thought is that we'll need some way to cycle through animation classes and add inline styles for "transition-duration". You'll see in the TODO.md that it takes 3 setState calls to complete an animation when reusing SUI CSS. I want to limit setting state and triggering renders for this as well.

This has to work for many components. Perhaps even be generalized for any component. I do not want add react-motion or react-motion-ui-pack. This seems like overkill and we'd have to duplicate all the CSS animations that the user has already downloaded.

Finally, I want to do this last. I don't think animations are more important than v1 APIs or component support.

Those are my thoughts for now. Ideas and suggestions on how to pull this off are welcomed.

[levithomason]

I have not tested it, but the proposal noted in the TODO above appears to have been successfully implemented by @asvetliakov in semantic-react here:

https://github.com/hallister/semantic-react/blob/master/src/components/animation

It looks like it is reusing the CSS classes which is exactly what we want. Who ever implements this should consider that work. Any input or learning experiences @asvetliakov could offer would also be much appreciated!

[asvetliakov]

@levithomason Wow, you're so fast noticed it! I actually didn't read your proposal, but forced to need replace react-motion with CSS transitions due to very bad performance on mobile devices (even with careful rendering and pure components).

You can copy my implementation if you want, it's pretty similar to how ReactTransitionGroup/ReactCSSTransitionGroup works but with few noticiable differences (only one child).

There are few things though:

• Animations on portal-ed components (Modal/Popup) should be performed on mounting (componentWillAppear) (it's obvious though)
• Leave transitions for multiple components when component inside another component are so much trouble. Obvious example is Modal transitions inside Dimmer transitions. The semantic-ui markup defines modal as child of dimmer but it won't work in my version due to:

return (
            <SemanticCSSTransition
                enter={enter}
                leave={leave}
                enterDuration={enterDuration}
                leaveDuration={leaveDuration}
                runOnMount
            >
                {active &&
                    <Component {...other}
                        key="dimmer"
                    >
                        {this.renderChildren()}
                    </Component>
                }
            </SemanticCSSTransition>
        )

active will trigger leave transition for dimmer but not for modal (as children) since it won't be re-rendered.

I Actually resolved it by prepending one common div inside portal so markup now is:

<portaldiv style="portal-style">
  <div style="portal-style">
      <dimmerdiv/>
      <modaldiv/>
  </div>
</portaldiv>

• My component doesn't support accordion transitions since they're style based mostly (need to animate margin/padding)

[levithomason]

Awesome, thanks for your extra notes and heads up! This will be helpful when we implement this. 👍

[layershifter]

Replying to this follow up.

I played with the current implementation of Transition in #813. I'm stating a fact that the handling of component's unmount is main pain there. I see a solution in usage of react-transition-group (and yes, @levithomason was right when pointed me to it) as it was done by @asvetliakov.

I want to finish work on #524 & #1072 and later back there, if no one will take this issue.

[padrefuture]

Trying to animate a website menu, using a menu or popup. Did anyone figure this out yet?