{"action":"created","issue":{"url":"https://api.github.com/repos/nareshbhatia/mobx-state-router/issues/50","repository_url":"https://api.github.com/repos/nareshbhatia/mobx-state-router","labels_url":"https://api.github.com/repos/nareshbhatia/mobx-state-router/issues/50/labels{/name}","comments_url":"https://api.github.com/repos/nareshbhatia/mobx-state-router/issues/50/comments","events_url":"https://api.github.com/repos/nareshbhatia/mobx-state-router/issues/50/events","html_url":"https://github.com/nareshbhatia/mobx-state-router/issues/50","id":370507298,"node_id":"MDU6SXNzdWUzNzA1MDcyOTg=","number":50,"title":"Animated page transition","user":{"login":"pvider","id":33367771,"node_id":"MDQ6VXNlcjMzMzY3Nzcx","avatar_url":"https://avatars3.githubusercontent.com/u/33367771?v=4","gravatar_id":"","url":"https://api.github.com/users/pvider","html_url":"https://github.com/pvider","followers_url":"https://api.github.com/users/pvider/followers","following_url":"https://api.github.com/users/pvider/following{/other_user}","gists_url":"https://api.github.com/users/pvider/gists{/gist_id}","starred_url":"https://api.github.com/users/pvider/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pvider/subscriptions","organizations_url":"https://api.github.com/users/pvider/orgs","repos_url":"https://api.github.com/users/pvider/repos","events_url":"https://api.github.com/users/pvider/events{/privacy}","received_events_url":"https://api.github.com/users/pvider/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-16T08:58:28Z","updated_at":"2018-10-19T21:40:06Z","closed_at":null,"author_association":"NONE","body":"Before I've used React Router 4 with TransitionGroup and CSSTransition. Previous page were faded away and moved horizontally while new one appeared. Just translateX and opacity animation in css. How to achive same effect with mobx-state-router? When I try to put RouterView instead of ReactRouter4 Switch previous page instantly becomes new page and I see how same page disappears and appears. How to make it work? This is my code piece:\r\n```jsx\r\nexport default class Shell extends React.Component {\r\n    render() {\r\n        const { rootStore: { routerStore } } = this.props;\r\n        const { routeName } = routerStore.routerState;\r\n        console.warn(routeName)\r\n\r\n        return (\r\n            <div>\r\n                <DevTools position={{ bottom: 0, right: 0 }} />\r\n                <Header />\r\n                <div style={{ margin: \"0 auto\", maxWidth: 1200, textOverflow: \"hidden\" }}>\r\n                    <TransitionGroup>\r\n                        <CSSTransition\r\n                            key={routeName}\r\n                            timeout={{ enter: 1200, exit: 1200 }}\r\n                            classNames={'fade'}\r\n                        >\r\n                            <section className=\"route-section\">\r\n                                <RouterView routerStore={routerStore} viewMap={viewMap} />\r\n                                <Footer />\r\n                            </section>\r\n                        </CSSTransition>\r\n                    </TransitionGroup>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/nareshbhatia/mobx-state-router/issues/comments/431507207","html_url":"https://github.com/nareshbhatia/mobx-state-router/issues/50#issuecomment-431507207","issue_url":"https://api.github.com/repos/nareshbhatia/mobx-state-router/issues/50","id":431507207,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMTUwNzIwNw==","user":{"login":"nareshbhatia","id":1220198,"node_id":"MDQ6VXNlcjEyMjAxOTg=","avatar_url":"https://avatars1.githubusercontent.com/u/1220198?v=4","gravatar_id":"","url":"https://api.github.com/users/nareshbhatia","html_url":"https://github.com/nareshbhatia","followers_url":"https://api.github.com/users/nareshbhatia/followers","following_url":"https://api.github.com/users/nareshbhatia/following{/other_user}","gists_url":"https://api.github.com/users/nareshbhatia/gists{/gist_id}","starred_url":"https://api.github.com/users/nareshbhatia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nareshbhatia/subscriptions","organizations_url":"https://api.github.com/users/nareshbhatia/orgs","repos_url":"https://api.github.com/users/nareshbhatia/repos","events_url":"https://api.github.com/users/nareshbhatia/events{/privacy}","received_events_url":"https://api.github.com/users/nareshbhatia/received_events","type":"User","site_admin":false},"created_at":"2018-10-19T21:40:06Z","updated_at":"2018-10-19T21:40:06Z","author_association":"OWNER","body":"I figured out the issue, but don't have a solution yet. `TransitionGroup` holds on to the previous child and the new child and renders both during the timeout duration. In the code above, the previous child and the new child are both `RouterView`s - two different instances. Unfortunately both instances will render the new state because that's what `RouterView` is supposed to do! We need to figure out how to hold on to the previous view during the transition state.\r\n\r\nStill thinking. Let me know if you have any ideas."}}
{"actor":{"display_login":"nareshbhatia"}}