{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/3974","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/3974/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/3974/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/3974/events","html_url":"https://github.com/vuejs/vue/issues/3974","id":183704514,"number":3974,"title":"Allow mode for transition-group","user":{"login":"rightaway","id":3680078,"avatar_url":"https://avatars3.githubusercontent.com/u/3680078?v=3","gravatar_id":"","url":"https://api.github.com/users/rightaway","html_url":"https://github.com/rightaway","followers_url":"https://api.github.com/users/rightaway/followers","following_url":"https://api.github.com/users/rightaway/following{/other_user}","gists_url":"https://api.github.com/users/rightaway/gists{/gist_id}","starred_url":"https://api.github.com/users/rightaway/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rightaway/subscriptions","organizations_url":"https://api.github.com/users/rightaway/orgs","repos_url":"https://api.github.com/users/rightaway/repos","events_url":"https://api.github.com/users/rightaway/events{/privacy}","received_events_url":"https://api.github.com/users/rightaway/received_events","type":"User","site_admin":false},"labels":[{"id":487748339,"url":"https://api.github.com/repos/vuejs/vue/labels/2.x","name":"2.x","color":"c2e0c6","default":false},{"id":217551163,"url":"https://api.github.com/repos/vuejs/vue/labels/feature%20request","name":"feature request","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-10-18T14:33:49Z","updated_at":"2017-07-04T19:57:24Z","closed_at":null,"body":"The standalone demo repo https://github.com/rightaway/demo shows the issue. If you click the **message1** button once and then click it again, the second **message1** notification appears and then the first one disappears. This is what `mode=out-in` is meant to solve for the `transition` tag, but there's no equivalent for `transition-group`. It leads to a very unattractive transition effect.\n\nIn this example I could use `transition mode=\"out-in\"` instead of `transition-group` (in https://github.com/rightaway/demo/blob/master/src/Notify.vue#L3) except for the fact that if you click the **message1** button and then the **message2** button, Vue gives an error saying I need to use `transition-group`.\n"},"comment":{"url":"https://api.github.com/repos/vuejs/vue/issues/comments/312941360","html_url":"https://github.com/vuejs/vue/issues/3974#issuecomment-312941360","issue_url":"https://api.github.com/repos/vuejs/vue/issues/3974","id":312941360,"user":{"login":"NonPolynomial","id":11672744,"avatar_url":"https://avatars3.githubusercontent.com/u/11672744?v=3","gravatar_id":"","url":"https://api.github.com/users/NonPolynomial","html_url":"https://github.com/NonPolynomial","followers_url":"https://api.github.com/users/NonPolynomial/followers","following_url":"https://api.github.com/users/NonPolynomial/following{/other_user}","gists_url":"https://api.github.com/users/NonPolynomial/gists{/gist_id}","starred_url":"https://api.github.com/users/NonPolynomial/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NonPolynomial/subscriptions","organizations_url":"https://api.github.com/users/NonPolynomial/orgs","repos_url":"https://api.github.com/users/NonPolynomial/repos","events_url":"https://api.github.com/users/NonPolynomial/events{/privacy}","received_events_url":"https://api.github.com/users/NonPolynomial/received_events","type":"User","site_admin":false},"created_at":"2017-07-04T19:57:24Z","updated_at":"2017-07-04T19:57:24Z","body":"I know thats just a workaround, but you could use the CSS transition-delay\r\n* for mode `out-in` use the `enter-active` class\r\n* for mode `in-out` use the `leave-active` class\r\n\r\ne.g.\r\n```scss\r\n.slider-item {\r\n  display: inline-block;\r\n\r\n  &.slider-enter-active,\r\n  &.slider-leave-active {\r\n    transition: opacity .3s;\r\n  }\r\n\r\n  &.slider-enter-active {\r\n    transition-delay: .5s;\r\n  }\r\n\r\n  &.slider-enter,\r\n  &.slider-leave-to {\r\n    opacity: 0;\r\n  }\r\n}\r\n```"}}
{"actor":{"display_login":"NonPolynomial"}}