Merge pull request #100 from bhnddowinf/2.0-cn

我校对 12

Author: dingyiming

src/guide/transitions.md

@@ -14,11 +14,11 @@ Vue 在元素在DOM中插入、更新或者移除时，提供多种不同方式
 - 在过渡钩子函数中使用 JavaScript 直接操作 DOM
 - 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
 
-在这里, 我们会讲到 进入、离开和列表的过渡， 你也可以看下一节的 [管理过渡状态](transitioning-state.html).
+在这里, 我们只会讲到 进入、离开和列表的过渡， 你也可以看下一节的 [管理过渡状态](transitioning-state.html).
 
 ## 单元素/组件的过渡
 
-Vue 提供了 `transition` 的封装组件，可以给任何元素和组件添加 entering/leaving 过渡
+Vue 提供了 `transition` 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
 
 - 条件渲染 （使用 `v-if`）
 - 条件展示 （使用 `v-show`）
@@ -83,18 +83,19 @@ new Vue({
 </style>
 {% endraw %}
 
-当插入或删除带有过渡的元素时，Vue 将：
+元素封装成过渡组件之后，遇到插入或删除，Vue 将
+
 
 1. 自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。
 
 2. 如果设置了过渡的 [JavaScript 钩子函数](#JavaScript-Hooks)，会在相应的阶段调用它们。
 
-3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：这是一个浏览器动效框架，和Vue的 `nextTick` 概念不同)
+3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，与 Vue，和Vue的 `nextTick` 概念不同)
 
 
 ### 过渡的-CSS-类名
 
-会有 4 个类名在 enter/leave 的过渡中切换
+会有 4 个(CSS)类名在 enter/leave 的过渡中切换
 
 1. `v-enter`: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
 
@@ -107,9 +108,7 @@ new Vue({
 
 ![Transition Diagram](/images/transition.png)
 
-Each of these classes will be prefixed with the name of the transition. Here the `v-` prefix is the default when you use a `<transition>` element with no name. If you use `<transition name="my-transition">` for example, then the `v-enter` class would instead be `my-transition-enter`.
-
-对于这些类名，`v` 是过渡名的前缀。使用 `name="my-transition"` 可以重置前缀，比如 `v-enter` 替换为 `my-transition-enter`。
+对于这些 `在 enter/leave 过渡中切换的类名`，`v-` 是这些类名的前缀。使用 `<name="my-transition>"` 可以重置前缀，比如 `v-enter` 替换为 `my-transition-enter`。
 
 `v-enter-active` and `v-leave-active` 可以控制 进入/离开 过渡的不同阶段，在下面章节会有个示例说明。
 
@@ -329,7 +328,7 @@ new Vue({
 
 ### 自定义过渡类名
 
-我们可以通过以下属性来自定义过渡类名：
+我们可以通过以下特性来自定义过渡类名：
 
 - `enter-class`
 - `enter-active-class`
@@ -395,7 +394,7 @@ new Vue({
 
 Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 `transitionend` 或 `animationend` 的，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。
 
-但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 `type` 属性并设置 `animation` 或 `transition` 来明确声明你需要 Vue 监听的类型。
+但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 `type` 特性并设置 `animation` 或 `transition` 来明确声明你需要 Vue 监听的类型。
 
 ### JavaScript 钩子
 
@@ -421,14 +420,14 @@ Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可
 // ...
 methods: {
   // --------
-  // ENTERING
+  // 进入中
   // --------
 
   beforeEnter: function (el) {
     // ...
   },
-  // the done callback is optional when
-  // used in combination with CSS
+  // 此回调函数是可选项的设置
+  // 与 CSS结合 时使用
   enter: function (el, done) {
     // ...
     done()
@@ -441,22 +440,22 @@ methods: {
   },
 
   // --------
-  // LEAVING
+  // 离开时
   // --------
 
   beforeLeave: function (el) {
     // ...
   },
-  // the done callback is optional when
-  // used in combination with CSS
+  // 此回调函数是可选项的设置
+  // 与 CSS结合 时使用
   leave: function (el, done) {
     // ...
     done()
   },
   afterLeave: function (el) {
     // ...
   },
-  // leaveCancelled only available with v-show
+  // leaveCancelled 只用于 v-show 中
   leaveCancelled: function (el) {
     // ...
   }
@@ -571,7 +570,7 @@ new Vue({
 
 ## 初始渲染的过渡
 
-可以通过 `appear` 属性设置节点的在初始渲染的过渡
+可以通过 `appear` 特性设置节点的在初始渲染的过渡
 
 ``` html
 <transition appear>
@@ -619,7 +618,7 @@ new Vue({
 
 可以这样使用，但是有一点需要注意：
 
-<p class="tip">当有**相同标签名**的元素切换时，需要通过 `key` 属性设置唯一的值来标记来让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，**给在 `<transition>` 组件中的多个元素设置 key  是一个更好的实践。**</p>
+<p class="tip">当有**相同标签名**的元素切换时，需要通过 `key` 特性设置唯一的值来标记来让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，**给在 `<transition>` 组件中的多个元素设置 key  是一个更好的实践。**</p>
 
 示例:
 
@@ -634,7 +633,7 @@ new Vue({
 </transition>
 ```
 
-在一些场景中，也可以给通过给同一个元素的 `key` 属性设置不同的状态来代替 `v-if` 和 `v-else`，上面的例子可以重写为：
+在一些场景中，也可以给通过给同一个元素的 `key` 特性设置不同的状态来代替 `v-if` 和 `v-else`，上面的例子可以重写为：
 
 ``` html
 <transition>
@@ -804,7 +803,7 @@ new Vue({
 </style>
 {% endraw %}
 
-同时生效的进入和离开不能总满足需求，所以 Vue 提供了 **过渡模式**
+同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 **过渡模式**
 
 
 - `in-out`: 新元素先进行过渡，完成之后当前元素过渡离开。
@@ -848,7 +847,7 @@ new Vue({
 </style>
 {% endraw %}
 
-只用添加一个简单的属性，就解决了之前的过渡问题而无需任何额外的代码。
+只用添加一个简单的特性，就解决了之前的过渡问题而无需任何额外的代码。
 
 `in-out` 模式不是经常用到，但对于一些稍微不同的过渡效果还是有用的。
 将之前的滑动淡出的例子结合：
@@ -902,7 +901,7 @@ new Vue({
 
 ## 多个组件的过渡
 
-多个组件的过渡很简单很多 - 我们不需要使用 `key` 属性。相反，我们只需要使用[动态组件](components.html#动态组件):
+多个组件的过渡很简单很多 - 我们不需要使用 `key` 特性。相反，我们只需要使用[动态组件](components.html#动态组件):
 
 
 ``` html
@@ -973,15 +972,15 @@ new Vue({
 
 ## 列表过渡
 
-目前为止，我们已经讲到：
+目前为止，关于过渡我们已经讲到：
 
 - 单个节点
-- 多个节点中渲染一个节点
+- 一次渲染多个节点
 
-那么怎么同步渲染整个列表，比如使用 `v-for` ？在这种场景中，使用  `<transition-group>` 组件。在我们深入例子之前，先了解关于这个组件的几个特点：
+那么怎么同时渲染整个列表，比如使用 `v-for` ？在这种场景中，使用  `<transition-group>` 组件。在我们深入例子之前，先了解关于这个组件的几个特点：
 
-- 不同于 `<transition>`， 它会以一个真实元素呈现：默认为一个 `<span>`。你也可以通过 `tag` 属性更换为其他元素。
-- 元素 **一定需要** 指定唯一的 `key` 属性值
+- 不同于 `<transition>`， 它会以一个真实元素呈现：默认为一个 `<span>`。你也可以通过 `tag` 特性更换为其他元素。
+- 元素 **一定需要** 指定唯一的 `key` 特性值
 
 ### 列表的进入和离开过渡
 
@@ -1084,7 +1083,7 @@ new Vue({
 
 ### 列表的位移过渡
 
-`<transition-group>` 组件还有一个特性。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只了解新增 ** `v-move` class 类名**，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 `name` 属性来自定义前缀，也可以通过 `move-class` 属性手动设置。
+`<transition-group>` 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只了解新增 ** `v-move` class 类名**，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 `name` 属性来自定义前缀，也可以通过 `move-class` 属性手动设置。
 
 这个类名对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：
 
@@ -1531,7 +1530,7 @@ Vue.component('my-special-transition', {
 
 ## 动态过渡
 
-在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 `name` 属性来来绑定动态值。
+在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 `name` 特性来来绑定动态值。
 
 ```html
 <transition v-bind:name="transitionName">
@@ -1540,7 +1539,7 @@ Vue.component('my-special-transition', {
 ```
 当你想在 Vue 的过渡系统中定义的 CSS 过渡/动画不同过渡间切换会非常有用。
 
-所有的过渡属性都是动态绑定。它不仅是简单的属性，通过事件的钩子函数方法，可以在获取相应到上下文数据。这意味着，可以根据组件状态通过 JavaScript 过渡设置不同的过渡效果。
+所有的过渡特性都是动态绑定。它不仅是简单的特性，通过事件的钩子函数方法，可以在获取相应到上下文数据。这意味着，可以根据组件状态通过 JavaScript 过渡设置不同的过渡效果。
 
 ``` html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>