-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<Transition /> Component #200
Comments
@levithomason Any ideas about this component? It's required by |
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. |
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! |
@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:
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>
|
Awesome, thanks for your extra notes and heads up! This will be helpful when we implement this. 👍 |
Replying to this follow up. I played with the current implementation of I want to finish work on #524 & #1072 and later back there, if no one will take this issue. |
Trying to animate a website menu, using a menu or popup. Did anyone figure this out yet? |
http://semantic-ui.com/modules/transition.html
The text was updated successfully, but these errors were encountered: