Vue——过渡和动画

　　（1）Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

　　（2）CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

　　（3）使用type attribute 并设置 animation 或 transition 来明确声明需要 Vue 监听的类型，这样就可以实现给同一个元素同时设置两种过渡动效。

　　（4）<transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)。

　　（5）当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

　　（6）推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

　　（7）可以通过 appear attribute 或者v-on:appear 钩子 设置节点在初始渲染的过渡。

　　（8）当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

　　（9）过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。（该模式不是经常用）

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

　　（10）多个组件的过渡简单很多，不需要使用 key attribute。相反，我们只需要使用动态组件。

　　（11）<transition-group> 组件，可以实现同时渲染整个列表，该组件的特点是：

• 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
• <transition-group>组件不仅可以进入和离开动画，还可以改变定位，此时需要用到v-move属性，它会在元素的改变定位的过程中应用。

　　（12）Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。使用 FLIP 过渡的元素不能设置为 display: inline，不过可以设置为 display: inline-block 或者放置于 flex 中；FLIP 动画不仅可以实现单列过渡，多维网格也同样可以过渡。

　　（13）通过 data 属性与 JavaScript 通信 ，就可以实现列表的交错过渡（如：v-bind:data-index="index"）。

　　（14）创建一个可复用过渡组件，需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。

　　（15）在 Vue 中即使是过渡也是数据驱动的，所有过渡 attribute 都可以动态绑定，不过还可以通过事件钩子获取上下文中的所有数据。

　　（16）创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。