{"action":"created","issue":{"url":"https://api.github.com/repos/drcmda/react-spring/issues/211","repository_url":"https://api.github.com/repos/drcmda/react-spring","labels_url":"https://api.github.com/repos/drcmda/react-spring/issues/211/labels{/name}","comments_url":"https://api.github.com/repos/drcmda/react-spring/issues/211/comments","events_url":"https://api.github.com/repos/drcmda/react-spring/issues/211/events","html_url":"https://github.com/drcmda/react-spring/issues/211","id":354599375,"node_id":"MDU6SXNzdWUzNTQ1OTkzNzU=","number":211,"title":"Transition component expected behavior? (Multiple elements created when toggling fast)","user":{"login":"johot","id":17697920,"node_id":"MDQ6VXNlcjE3Njk3OTIw","avatar_url":"https://avatars1.githubusercontent.com/u/17697920?v=4","gravatar_id":"","url":"https://api.github.com/users/johot","html_url":"https://github.com/johot","followers_url":"https://api.github.com/users/johot/followers","following_url":"https://api.github.com/users/johot/following{/other_user}","gists_url":"https://api.github.com/users/johot/gists{/gist_id}","starred_url":"https://api.github.com/users/johot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johot/subscriptions","organizations_url":"https://api.github.com/users/johot/orgs","repos_url":"https://api.github.com/users/johot/repos","events_url":"https://api.github.com/users/johot/events{/privacy}","received_events_url":"https://api.github.com/users/johot/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-08-28T07:11:51Z","updated_at":"2018-08-28T07:26:22Z","closed_at":null,"author_association":"NONE","body":"So I wanted to use the `<Transition/>` component for fading a spinner in/out as it mounts and unmounts. I looked at this sample from the docs for my [implementation](https://codesandbox.io/s/n329on8q1p):\r\n\r\n```jsx\r\n<Transition from={{ opacity: 0 }} enter={{ opacity: 1 }} leave={{ opacity: 0 }}>\r\n    {visible && (styles => <div style={styles}>Single Component</div>)}\r\n</Transition>\r\n```\r\n\r\nWhen toggling the `visible` flag fast I will see another component get created while the original spinner is fading out.\r\n\r\nIs this the expected behavior? I could understand if it is since it might see the first spinner instance as \"unmounted\" thus needing to mount another one? But couldn't it somehow reuse the first component as long as the instance is not fully animated out. Or am I missing something?\r\n\r\nI prepared a code sandbox sample that should make it easy to test this, using latest `react` and `react-spring` versions. Also made sure to cache the inner component to see if that made any changes.\r\n\r\nTake a look at the sample code and sample here:\r\n\r\nhttps://codesandbox.io/s/n329on8q1p\r\n\r\nThanks for a great library!\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/drcmda/react-spring/issues/comments/416479322","html_url":"https://github.com/drcmda/react-spring/issues/211#issuecomment-416479322","issue_url":"https://api.github.com/repos/drcmda/react-spring/issues/211","id":416479322,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNjQ3OTMyMg==","user":{"login":"drcmda","id":2223602,"node_id":"MDQ6VXNlcjIyMjM2MDI=","avatar_url":"https://avatars0.githubusercontent.com/u/2223602?v=4","gravatar_id":"","url":"https://api.github.com/users/drcmda","html_url":"https://github.com/drcmda","followers_url":"https://api.github.com/users/drcmda/followers","following_url":"https://api.github.com/users/drcmda/following{/other_user}","gists_url":"https://api.github.com/users/drcmda/gists{/gist_id}","starred_url":"https://api.github.com/users/drcmda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/drcmda/subscriptions","organizations_url":"https://api.github.com/users/drcmda/orgs","repos_url":"https://api.github.com/users/drcmda/repos","events_url":"https://api.github.com/users/drcmda/events{/privacy}","received_events_url":"https://api.github.com/users/drcmda/received_events","type":"User","site_admin":false},"created_at":"2018-08-28T07:26:22Z","updated_at":"2018-08-28T07:26:22Z","author_association":"OWNER","body":"Yep, that's expected. Transition guarantees exit transitions, even if the same element, with the same key, comes in again. In the transition component you're always dealing with a stack, therefore it's often better to position items absolutely, unless you're working with lists where items *should* push others aways. https://codesandbox.io/embed/oxml10qxlz"}}
{"actor":{"display_login":"drcmda"}}