{"action":"created","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/84","repository_url":"https://api.github.com/repos/css-modules/css-modules","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/84/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/84/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/84/events","html_url":"https://github.com/css-modules/css-modules/issues/84","id":116651296,"number":84,"title":"CSS Modules + ReactCSSTransitionGroup in React 0.14","user":{"login":"ArnoBuschmann","id":1889233,"avatar_url":"https://avatars.githubusercontent.com/u/1889233?v=3","gravatar_id":"","url":"https://api.github.com/users/ArnoBuschmann","html_url":"https://github.com/ArnoBuschmann","followers_url":"https://api.github.com/users/ArnoBuschmann/followers","following_url":"https://api.github.com/users/ArnoBuschmann/following{/other_user}","gists_url":"https://api.github.com/users/ArnoBuschmann/gists{/gist_id}","starred_url":"https://api.github.com/users/ArnoBuschmann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ArnoBuschmann/subscriptions","organizations_url":"https://api.github.com/users/ArnoBuschmann/orgs","repos_url":"https://api.github.com/users/ArnoBuschmann/repos","events_url":"https://api.github.com/users/ArnoBuschmann/events{/privacy}","received_events_url":"https://api.github.com/users/ArnoBuschmann/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2015-11-12T22:04:22Z","updated_at":"2016-12-20T11:05:58Z","closed_at":"2015-11-12T23:05:39Z","body":"Hello, following this page: https://gist.github.com/markdalgleish/fab73ca3ace3b9ab6077\n\nThe animation/transition in my code is still not taking place and the element renders right away without transitioning.\n\nWhat am I missing or doing wrong?\n\nThe code:\n\n``` javascript\nimport styles from '../assets/css/app.css';\nimport CSSTransitionGroup from 'react-addons-css-transition-group';\n\nclass App extends React.Component {\n  renderMyTransition() {\n    switch (this.props.currentPage) {\n    case 'testpage':\n      return <div key=\"one\"><p>Test-Page-One</p></div>\n    case 'secondtestpage':\n      return <div key=\"two\"><p>Test-Page-Two</p></div>\n    default:\n      return <div key=\"default\"><p>Not found.</p></div>\n    }\n  }\n  render() {\n    return (\n      <div className={styles.content}>\n        <CSSTransitionGroup transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionName={styles}>\n          {this.renderMyTransition()}\n        </CSSTransitionGroup>\n      </div>\n    );\n  }\n}\n\nexport default App;\n```\n\nThe CSS:\n\n```\n.enter {\n  opacity: 0.01;\n  transition: opacity 1.5s ease-in;\n}\n.enter.enter-active {\n  opacity: 1;\n}\n.leave {\n  opacity: 1;\n  transition: opacity 1.5s ease-in;\n}\n.leave.leave-active {\n  opacity: 0.01;\n}\n.appear {\n  opacity: 0.01;\n}\n.appear.appear-active {\n  opacity: 1;\n  transition: opacity 1.5s ease-in;\n}\n```\n"},"comment":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/comments/268216366","html_url":"https://github.com/css-modules/css-modules/issues/84#issuecomment-268216366","issue_url":"https://api.github.com/repos/css-modules/css-modules/issues/84","id":268216366,"user":{"login":"reznord","id":3415488,"avatar_url":"https://avatars.githubusercontent.com/u/3415488?v=3","gravatar_id":"","url":"https://api.github.com/users/reznord","html_url":"https://github.com/reznord","followers_url":"https://api.github.com/users/reznord/followers","following_url":"https://api.github.com/users/reznord/following{/other_user}","gists_url":"https://api.github.com/users/reznord/gists{/gist_id}","starred_url":"https://api.github.com/users/reznord/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reznord/subscriptions","organizations_url":"https://api.github.com/users/reznord/orgs","repos_url":"https://api.github.com/users/reznord/repos","events_url":"https://api.github.com/users/reznord/events{/privacy}","received_events_url":"https://api.github.com/users/reznord/received_events","type":"User","site_admin":false},"created_at":"2016-12-20T11:05:58Z","updated_at":"2016-12-20T11:05:58Z","body":"@elrumordelaluz Regarding the page transitions, I did a bit of homework and implemented it. \r\n\r\n```\r\nimport styles from './styles/animate.css;\r\n\r\nclass Test extends React.Component {\r\n  render() {\r\n    <ReactCSSTransitionGroup \r\n         transitionAppear={true} \r\n         transitionName={styles} \r\n         transitionEnterTimeout={300} \r\n         transitionLeaveTimeout={300} \r\n         transitionAppearTimeout={300}\r\n     >\r\n  }\r\n}\r\n```\r\n\r\nand this is what I did in `animate.css`:\r\n\r\n```\r\n.enter {\r\n  opacity: 0.01;\r\n\r\n  &.enterActive {\r\n    transition: opacity 0.3s ease-in;\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n.leave {\r\n  opacity: 1;\r\n\r\n  &.leaveActive {\r\n    transition: opacity 0.3s ease-out;\r\n    opacity: 0.01;\r\n  }\r\n}\r\n\r\n.appear {\r\n  opacity: 0.01;\r\n\r\n  &.appearActive {\r\n    transition: opacity 0.3s ease-in;\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n```\r\n"}}
{"actor":{"display_login":"reznord"}}