{"action":"opened","issue":{"url":"https://api.github.com/repos/program-management/Vue2.0/issues/2","repository_url":"https://api.github.com/repos/program-management/Vue2.0","labels_url":"https://api.github.com/repos/program-management/Vue2.0/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/program-management/Vue2.0/issues/2/comments","events_url":"https://api.github.com/repos/program-management/Vue2.0/issues/2/events","html_url":"https://github.com/program-management/Vue2.0/issues/2","id":188414526,"number":2,"title":"关于Vue2.0的过渡效果与过渡状态","user":{"login":"bluezhan","id":16684336,"avatar_url":"https://avatars.githubusercontent.com/u/16684336?v=3","gravatar_id":"","url":"https://api.github.com/users/bluezhan","html_url":"https://github.com/bluezhan","followers_url":"https://api.github.com/users/bluezhan/followers","following_url":"https://api.github.com/users/bluezhan/following{/other_user}","gists_url":"https://api.github.com/users/bluezhan/gists{/gist_id}","starred_url":"https://api.github.com/users/bluezhan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bluezhan/subscriptions","organizations_url":"https://api.github.com/users/bluezhan/orgs","repos_url":"https://api.github.com/users/bluezhan/repos","events_url":"https://api.github.com/users/bluezhan/events{/privacy}","received_events_url":"https://api.github.com/users/bluezhan/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-10T03:53:23Z","updated_at":"2016-11-10T03:53:23Z","closed_at":null,"body":"### 前言 \r\n\r\n因为是MVVM模式，加上又是单页面应用，会考虑到页面的切换过渡效果和各种组件、控件、插件的界面动态切换效果。固然就会在这一块加入概念和处理方式。\r\n\r\n大概的处理方式就是：\r\n\r\n- CSS3.0的动画\r\n- JavaScript的处理\r\n\r\n看一下官方[过渡效果](https://vuefe.cn/guide/transitions.html) \r\n\r\n通过 Vue 2.0 的过渡系统， 在插入、更新或者移除 `DOM` 时，提供多种不同方式的应用过渡效果。\r\n包括以下工具：\r\n\r\n- 在 `CSS` 过渡和动画中自动应用 `class`\r\n- 可以配合使用第三方 `CSS` 动画库，如 `Animate.css`\r\n- 在过渡钩子函数中使用 `JavaScript` 直接操作 `DOM`\r\n- 可以配合使用第三方 `JavaScript` 动画库，如 `Velocity.js`\r\n- 在这里，我们只会讲到进入、离开和列表的过渡， 你也可以看下一节的 [管理过渡状态](https://vuefe.cn/guide/transitioning-state.html).\r\n\r\n### 单元素/组件的过渡\r\n\r\n贴个例子：\r\n```html\r\n<div id=\"demo\">\r\n  <button v-on:click=\"show = !show\">\r\n    点击我切换（Toggle）\r\n  </button>\r\n  <transition name=\"fade\">\r\n    <p v-if=\"show\">我就是个动画</p>\r\n  </transition>\r\n</div>\r\n```\r\n```css\r\n.fade-enter-active, .fade-leave-active {\r\n  transition: opacity .5s\r\n}\r\n.fade-enter, .fade-leave-active {\r\n  opacity: 0\r\n}\r\n```\r\n```js\r\nnew Vue({\r\n  el: '#demo',\r\n  data: {\r\n    show: true\r\n  }\r\n})\r\n```\r\n\r\n在上面的案例，会发现：有个 `transition` 的封装元素，而且还会发生CSS的类的命名格式。\r\n\r\nVue 2.0 提供了 `transition` 的封装组件，在下列情形中，可以给任何元素和组件添加 `entering/leaving` 过渡\r\n\r\n- 条件渲染 （使用 `v-if`）\r\n- 条件展示 （使用 `v-show`）\r\n- 循环语句 （使用 `v-for`；只在插入和删除时触发，使用 `vue-animated-list` 插件）\r\n- 动态组件 （数据驱动组件过渡）\r\n- 组件根节点 （组件的根节点上，并且被 Vue2.0 实例 `DOM` 方法（如 `vm.$appendTo(el)`）触发。）\r\n\r\n在 transition 的封装元素里有个`name`属性并赋了值 fade ；上面说得很明白了，__可以给任何元素和组件添加 `entering/leaving` 过渡__。这个时候去瞄一下CSS的类命名就完全明白了。\r\n\r\n本来这里作者是想封装个基本动画的；最后是没必要的，所以需要自己添加，也可以引入动画库和插件。\r\n\r\n__这里应该还涉及到  `transition` 的封装组件的状态和处理机制，这才是好玩的东西，也是个重点。下面讲到，[点击我吧。]()__\r\n\r\n我们先来看一段Vue2.0源码：\r\n\r\n```js\r\n// 这是切换CSS的类命名\r\nvar autoCssTransition = cached(function (name) {\r\n  return {\r\n    enterClass: (name + \"-enter\"),\r\n    leaveClass: (name + \"-leave\"),\r\n    appearClass: (name + \"-enter\"),\r\n    enterActiveClass: (name + \"-enter-active\"),\r\n    leaveActiveClass: (name + \"-leave-active\"),\r\n    appearActiveClass: (name + \"-enter-active\")\r\n  }\r\n});\r\n  // 开始 enter 的 transition \r\n  beforeEnterHook && beforeEnterHook(el);\r\n  if (expectsCSS) {\r\n    addTransitionClass(el, startClass);\r\n    addTransitionClass(el, activeClass);\r\n    nextFrame(function () {\r\n      removeTransitionClass(el, startClass);\r\n      if (!cb.cancelled && !userWantsControl) {\r\n        whenTransitionEnds(el, type, cb);\r\n      }\r\n    });\r\n  }\r\n\r\n```\r\n\r\n\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"bluezhan"}}