{"action":"opened","issue":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/167","labels_url":"https://api.github.com/repos/vuejs/Discussion/issues/167/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/Discussion/issues/167/comments","events_url":"https://api.github.com/repos/vuejs/Discussion/issues/167/events","html_url":"https://github.com/vuejs/Discussion/issues/167","id":80944156,"number":167,"title":".v-transition in addition to .v-leave/.v-enter","user":{"login":"aristidesfl","id":208149,"avatar_url":"https://avatars.githubusercontent.com/u/208149?v=3","gravatar_id":"","url":"https://api.github.com/users/aristidesfl","html_url":"https://github.com/aristidesfl","followers_url":"https://api.github.com/users/aristidesfl/followers","following_url":"https://api.github.com/users/aristidesfl/following{/other_user}","gists_url":"https://api.github.com/users/aristidesfl/gists{/gist_id}","starred_url":"https://api.github.com/users/aristidesfl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aristidesfl/subscriptions","organizations_url":"https://api.github.com/users/aristidesfl/orgs","repos_url":"https://api.github.com/users/aristidesfl/repos","events_url":"https://api.github.com/users/aristidesfl/events{/privacy}","received_events_url":"https://api.github.com/users/aristidesfl/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-05-26T12:38:25Z","updated_at":"2015-05-26T12:38:25Z","closed_at":null,"body":"Instead of having to define the `transition` property for each element which is transitioned:\r\n\r\n```\r\n.msg {transition: all .3s ease;}\r\n.msg2 {transition: all .3s ease;}\r\n.msg3 {transition: all .3s ease;}\r\n.v-enter, .v-leave {opacity: 0;}\r\n```\r\n\r\n\r\nIt always seemed intuitive to define the `transition` property, which actually enables the animation, in the classes which are automatically added by Vue when the transition happens:\r\n\r\n```\r\n.v-enter, .v-leave {\r\n  transition: all .3s ease;\r\n  opacity:0\r\n}\r\n```\r\n\r\nUnfortunately this doesn't work, since the `.v-enter` class is removed before the transition starts, the `transition` property also goes away, so the transition is abrupt. \r\n\r\nThe idea is for Vue to set a `.v-transition` class, both on leave and enter for the entire duration of the transition, so it is possible to define all the properties related to the animation, in the actual classes which are handled by the `v-transition` directive. It would be possible to write the following, without having to add transition properties to any element specific classes.:\r\n\r\n```\r\n.v-transition { transition: all .3s ease; }\r\n.v-enter, .v-leave { opacity:0; }\r\n```\r\n\r\nOr even this:\r\n\r\n```\r\n.v-transition, .v-enter, .v-leave {\r\n  transition: all .3s ease;\r\n  opacity:0\r\n}\r\n```\r\n\r\nSurely one could manually add a `.v-transition` class in the html template for each element with a v-transition directive, and one can already do that: `<div class=\"v-transition\" v-transition>` But it would be more simple and contained if all things related to transition were dependent only on the v-transition directive, instead of being scattered over the class attribute as well. \r\n\r\nIt would only represent a marginal improvement, but considering Vue already has the logic in place to add/remove classes on transition begin/end, it would probably be trivial to implement."}}