feat(Transition): add component #1435

layershifter · 2017-03-10T09:31:53Z

Fixes #200.

This PR is second try for Transition component. It uses react-addons-transition-group for deal with SUI's CSS animations.

levithomason · 2017-03-11T06:02:25Z

❤️

layershifter · 2017-03-25T19:23:39Z

Main problem that I have there it's missing cancelUnmount event. So when component is unmouting there is no way to know that we need to cancel unmount animation if component changed state and is visible again.

I need to pull transition-group code and review it, possible I'm missing something.

bjmiller · 2017-04-10T18:43:45Z

Is there anything we can do to help get this completed and merged? My team is excited to have transitions.

layershifter · 2017-04-14T07:53:17Z

@bjmiller Thanks for ping. This PR is one of the most complicated places, it needs enough time to find the best solution, since this is not my first attempt to solve it 😄

I hope to find enough time on this weekend to create MVP which meets all the requirements

layershifter · 2017-04-17T14:20:34Z

I've pulled code from react-transition-group#24 as start point. I will try to spend all free time to finish it.

TODO

combile Transition and TransitionWrapper;
wrap all children automatically on TransitionGroup
remove dependency on dom-helpers
replace original callbacks with callbacks that more closer to SUI
make an inventory in propTypes
typings
docs and tests
refactor mergeChildMappings

codecov-io · 2017-04-20T14:58:14Z

Codecov Report

Merging #1435 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1435      +/-   ##
==========================================
+ Coverage   99.75%   99.76%   +<.01%     
==========================================
  Files         145      147       +2     
  Lines        2477     2577     +100     
==========================================
+ Hits         2471     2571     +100     
  Misses          6        6

Impacted Files	Coverage Δ
src/modules/Transition/TransitionGroup.js	`100% <100%> (ø)`
src/modules/Transition/Transition.js	`100% <100%> (ø)`
src/collections/Form/Form.js	`100% <0%> (ø)`	⬆️
src/elements/Input/Input.js	`100% <0%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c96363c...97f77a9. Read the comment docs.

layershifter

@levithomason I'm finally ready to say that we are ready to review 🎉

To all: this component is ready for some user testing and feedback.

How?

If you could pull this branch feat/transition-2, npm install, npm start, and navigate to http://localhost:8080/modules/transition, you'll see the Transition component examples. Please have a look at the code, play with the editors, and let me know what you think.

brianespinosa · 2017-06-30T01:06:21Z

Sweet! I will get some testing in on this branch this weekend. Great work @layershifter. I was sad when the old version had to be abandoned, but I am glad we are using the non-deprecated package that React team is supporting with this one.

john-osullivan · 2017-07-08T10:46:46Z

Just wanted to drop by and say that y'all are MVPs for going through the legwork of porting Semantic-UI. Particularly here when it gets really messy, hooking into React's animation systems. I've been using React for years and that stuff still mystifies me. Thanks for working on this! I'll try to test it if my team finishes required UI soon, and if not, I look forward to using it once it's merged. Thank you for contributing to OSS ❤️

levithomason · 2017-07-16T18:39:19Z

docs/app/Examples/modules/Transition/Types/TransitionExampleGroup.js

+        <Transition.Group
+          as={List}
+          duration={1000}
+          divided size='huge'


Whoops, two lines: divided size='huge'

levithomason · 2017-07-16T18:45:13Z

src/modules/Transition/Transition.d.ts

+  /** Primary content. */
+  children?: React.ReactNode;
+
+  /** Duration of the CSS transition animation in microseconds. */


microseconds => milliseconds

levithomason · 2017-07-16T18:45:20Z

src/modules/Transition/Transition.js

+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Duration of the CSS transition animation in microseconds. */


microseconds => milliseconds

levithomason · 2017-07-16T18:45:26Z

src/modules/Transition/TransitionGroup.d.ts

+  /** Primary content. */
+  children?: React.ReactNode;
+
+  /** Duration of the CSS transition animation in microseconds. */


microseconds => milliseconds

levithomason · 2017-07-16T18:45:31Z

src/modules/Transition/TransitionGroup.js

+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Duration of the CSS transition animation in microseconds. */


microseconds => milliseconds

levithomason · 2017-07-16T19:11:19Z

Heads up, I'm going to push some refactors and updates here for a bit.

levithomason · 2017-07-16T19:39:56Z

docs/app/Examples/modules/Transition/Explorers/TransitionExampleSingleExplorer.js

+            type='range'
+            value={duration}
+          />
+          <Form.Button content={visible ? 'Hide' : 'Show'} onClick={this.handleVisibility} />


When changing state during a transition the example does not behave correctly as the transition is interrupted. I'd like to disable the form controls while the transition is in progress.

In trying to disable/enable the Show/Hide button in the explorer examples, I now think we need to fire the callbacks on Transition.Group for each transition as well. I'm not sure there is a way to capture start/complete without this.

Would you mind updating the examples to show how this is possible?

Hm, thanks for attracting attention there. I'm that Transition.Group should also have onComplete, onHide, onShow, onStart and this should be illustrated in separate example.

However, I want to do this in sepate PR, this one is already big enough.

Separate PR sounds good.

levithomason · 2017-07-16T20:02:32Z

This is looking fantastic, thanks! I have a couple questions in addition to what I left inline. It would be great to get your thoughts behind these items:

Transition vs Transition.Group

I'm a little confused on the use of Transition vs Transition.Group. The group seems to be used on single elements when they need to mount/unmount in sync with the transition. The single Transition seems to be used for static transitions. However, in the examples when trying to replace a Transition.Group around a single element with a Transition I cannot seem to figure out how to get it to work.

Intuitively, I would expect a Transtion to only allow a single child and a Transition.Group to accept multiple children. I'd then think a group would handle group operations such as staggering:

https://semantic-ui.com/modules/transition.html#/examples

Could you give some info on what the differences are and why two components are needed to accomplish this?

`into`

Could you expound a bit on this prop? I'm not entirely sure why it is needed and what the intent behind it is.

Again, thanks for the massive amount of work here. We'll surely get this merged soon 🎉

levithomason · 2017-07-26T19:42:43Z

I've pushed some changes here, no changes to the logic, only naming and docs:

rename into -> visible
rename enter/exit/appear terminology to show/hide/mount in keeping with SUI
rename "entire" transitions to "directional" (vs static)
refactored Transition/Transition Group docs to clarify differences and usage
refactored Explorer docs to clarify differences and usage
fixed missing typings

In the next PR(s) let's address:

Implementing Transition in our own components
Transition.Group callbacks
Usage examples for various props (unmountOnHide, etc)

bjmiller · 2017-07-27T03:59:17Z

@levithomason: Is there an ETA for a new release that includes this feature?

levithomason · 2017-07-29T18:57:00Z

Released in semantic-ui-react@0.71.3

levithomason · 2017-07-29T18:57:27Z

I do the best I can to make a release every weekend.

rutvijprimaseller · 2017-08-08T10:21:59Z

Is there a way to animate Accordion or shall we expect it in later releases? @levithomason

brianespinosa · 2017-08-08T22:34:00Z

@rutvijprimaseller Currently there is no support for animating in accordions. This Transition component just barely got merged into SUIR and the components in the project have not yet been updated to use it.

@layershifter you might know... are there separate tasks set aside for converting each of these yet?

layershifter · 2017-08-09T07:36:29Z

No, there are no separate tasks. But, plans for them exist of course. I want begin from Dimmer because it will be used by Modal (#1739). I want finish some of my open PRs and then I will start on it.

brianespinosa · 2017-08-10T15:50:38Z

@layershifter That makes my day to hear.

Maxhodges · 2017-09-19T11:24:16Z

can I track the status of Accordion transitions somewhere? It's too fast, so I want a slightly slower animation.

subodhpareek18 · 2017-10-26T18:35:12Z

Is it possible to run static animation transitions in a loop? Like a continuous tada animation on a call icon for an incoming call notification until it's clicked on and picked up.

levithomason · 2017-12-10T18:09:42Z

@subodhpareek18 I don't see why not

layershifter added the enhancement label Mar 10, 2017

levithomason mentioned this pull request Apr 3, 2017

Gradually display sub menus #1539

Closed

layershifter force-pushed the feat/transition-2 branch 2 times, most recently from 0da3649 to 9f6c1dd Compare May 26, 2017 13:30

layershifter force-pushed the feat/transition-2 branch 3 times, most recently from e7c5625 to 19a988f Compare June 7, 2017 11:26

layershifter added the ready for review label Jun 7, 2017

layershifter commented Jun 7, 2017

View reviewed changes

levithomason reviewed Jul 16, 2017

View reviewed changes

levithomason force-pushed the feat/transition-2 branch 3 times, most recently from cfb5e41 to 925efe2 Compare July 16, 2017 19:34

levithomason reviewed Jul 16, 2017

View reviewed changes

levithomason added needs author feedback and removed ready for review labels Jul 16, 2017

levithomason and others added 3 commits July 26, 2017 12:08

refactor(Transition): minimize and cleanup docs

be69466

docs(Transition): fix onStart description

8f5e348

docs(Transition): sort props

68e74cf

levithomason force-pushed the feat/transition-2 branch from 9816f61 to 053b9de Compare July 26, 2017 19:10

levithomason added 8 commits July 26, 2017 12:31

refactor(Transition): rename prop into -> visible

a8d40ce

docs(Transition): clarify Transition vs Group

2965f0d

docs(ComponentExample): add description maxWidth

d219568

docs(Transition): clarify explorer differences

30ba499

refactor(Transition): rename prop unmountOnExit -> unmountOnHide

d212f17

fix(index): add missing transition typings

56c8893

refactor(Transition): rename entire > directional

77d88dc

refactor(Transition): mountOnEnter -> mountOnShow

aac1d51

levithomason force-pushed the feat/transition-2 branch from a242223 to 7aebe8b Compare July 26, 2017 19:31

refactor(Transition): transitionAppear -> transitionOnMount

97f77a9

levithomason force-pushed the feat/transition-2 branch from 7aebe8b to 97f77a9 Compare July 26, 2017 19:34

levithomason merged commit 049040a into master Jul 26, 2017

levithomason deleted the feat/transition-2 branch July 26, 2017 19:43

layershifter mentioned this pull request Sep 12, 2017

[Dropdown] Animation Not working in case of semantic-ui-react #2071

Closed

Semantic-Org locked and limited conversation to collaborators Oct 26, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Transition): add component #1435

feat(Transition): add component #1435

layershifter commented Mar 10, 2017 •

edited

levithomason commented Mar 11, 2017

layershifter commented Mar 25, 2017 •

edited

bjmiller commented Apr 10, 2017 •

edited

layershifter commented Apr 14, 2017

layershifter commented Apr 17, 2017 •

edited

codecov-io commented Apr 20, 2017 •

edited

layershifter left a comment

brianespinosa commented Jun 30, 2017

john-osullivan commented Jul 8, 2017 •

edited

levithomason Jul 16, 2017

levithomason Jul 16, 2017

levithomason Jul 16, 2017

levithomason Jul 16, 2017

levithomason Jul 16, 2017

levithomason commented Jul 16, 2017

levithomason Jul 16, 2017

layershifter Jul 17, 2017

layershifter Jul 17, 2017

levithomason Jul 26, 2017

levithomason commented Jul 16, 2017

levithomason commented Jul 26, 2017 •

edited

bjmiller commented Jul 27, 2017

levithomason commented Jul 29, 2017

levithomason commented Jul 29, 2017

rutvijprimaseller commented Aug 8, 2017

brianespinosa commented Aug 8, 2017

layershifter commented Aug 9, 2017

brianespinosa commented Aug 10, 2017

Maxhodges commented Sep 19, 2017

subodhpareek18 commented Oct 26, 2017

levithomason commented Dec 10, 2017

feat(Transition): add component #1435

feat(Transition): add component #1435

Conversation

layershifter commented Mar 10, 2017 • edited

levithomason commented Mar 11, 2017

layershifter commented Mar 25, 2017 • edited

bjmiller commented Apr 10, 2017 • edited

layershifter commented Apr 14, 2017

layershifter commented Apr 17, 2017 • edited

TODO

codecov-io commented Apr 20, 2017 • edited

Codecov Report

layershifter left a comment

Choose a reason for hiding this comment

How?

brianespinosa commented Jun 30, 2017

john-osullivan commented Jul 8, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

levithomason commented Jul 16, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

levithomason commented Jul 16, 2017

Transition vs Transition.Group

into

levithomason commented Jul 26, 2017 • edited

bjmiller commented Jul 27, 2017

levithomason commented Jul 29, 2017

levithomason commented Jul 29, 2017

rutvijprimaseller commented Aug 8, 2017

brianespinosa commented Aug 8, 2017

layershifter commented Aug 9, 2017

brianespinosa commented Aug 10, 2017

Maxhodges commented Sep 19, 2017

subodhpareek18 commented Oct 26, 2017

levithomason commented Dec 10, 2017

layershifter commented Mar 10, 2017 •

edited

layershifter commented Mar 25, 2017 •

edited

bjmiller commented Apr 10, 2017 •

edited

layershifter commented Apr 17, 2017 •

edited

codecov-io commented Apr 20, 2017 •

edited

john-osullivan commented Jul 8, 2017 •

edited

`into`

levithomason commented Jul 26, 2017 •

edited