transition-group and animated-transition-group

[GuillaumeCisco]

Looks like there is a problem with README, It refers to animated-transition-group but the code does not reflect it.

The right project is https://github.com/faceyspacey/animated-transition-group I came accross this issue because I wanted to use transition-group as you do in redux first router here: https://github.com/faceyspacey/redux-first-router-demo/blob/master/src/components/Switcher.js

But the code in the redux first router demo did not work for me. I used instead the animated-transition-group and it works well :)

[faceyspacey]

Hmmm. transition-group is actually the newer correct one. What was wrong with transition-group?

[faceyspacey]

readme updated.

[GuillaumeCisco]

Thank you :) Hum I don't really know what when wrong, I was trying to make it works, and I had export not react component... blabla errors. And it disappeared with animated-transition-group. Maybe my node_modules where corrupted. I've just installed transition-group with yarn and replaced by the correct React Component and it works same way as before :)

Only drawback using this lib is deeply correlated to ReactTransitionGroup because it uses a external css file. I would have like to use emotion for it. As you pointed in one of your aticle on medium, I now use this lib in production and it's awesome! Clear, quick, SSR compliant. And most of all, We can write css that will create css :)

[faceyspacey]

U should write an article on Emotion. Someone needs to tell that story. Ie emotion with code splitting.

I didn't understand the CSS issue. RTG doesn't export a CSS file as far as I know.

[GuillaumeCisco]

Sorry about the external css file. I was unclear. RTG does not export anything but we need to create an external css file for using ReactCSSTransitionGroup as RTG uses it (or am I totally wrong here?)

In this component, when a new item is added to ReactCSSTransitionGroup it will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the transitionName prop.

You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

I think I will write a total article on medium on using Redux First Router with universal-component for code splitting and the services I created redux-reducers-inkector and redux-sagas-injector that download the reducers and sagas needed only for a route. Allowing better code splitting. These last two packages support HMR.

So roughly speaking, it will deal with SSR, universal-component, redux-first-router, Code splitting, emotion, material-ui, and even electron. With full HMR. I'll also make a demo for that. Currently you can see how I deal with this code on : https://github.com/GuillaumeCisco/restaurantdelaposte Which is a work in progress for a restaurant's friend :)