---恢复内容开始---
今天看了过渡，试着做了轮播图。
Vue主要渲染条件：
v-if：是将元素删除再创造出来进行渲染。
v-show：是将元素的display=none掉，再进行渲染；
要点知识：v-key：唯一元素标识，若不设置v-key，相同的名字的标签不会被从新渲染，只会瞬间改变内容。这个非常有用，轮播图就靠它了。
只有满足将dom元素删除（v-if类似）或者display：none（v-show类似）掉，才会渲染。只改变位置，或者颜色等其他，是不会被渲染的，但这种情况，直接使用普通方法就好了，没必要用vue的过渡模式。
两个标签：
transition标签：将需要过渡的元素放在里面，就能进行过渡，但里面过渡的标签实际只有一个，按条件显示到底是哪一个标签。
transition-group:里面可以放很多元素，v-for出来的元素必须放里面。里面可以设置个tag=‘p’，当显示在浏览器中时，就变成p标签。里面的元素必须设置v-key。
两种方式：
javascript钩子：在javascript中设置过度阶段属性。
css方式：在css中设置过度阶段属性。
四个阶段：
1、enter：元素开始渲染的状态，还没有渲染。
2、enter-to（active）：这两个区别搞不明白，这个不行就换另一个，我是这么干的。就是目标状态，从enter 到enter-to的状态，transition：all 3s就写在这个状态下。
3、leave：开始删除或者隐藏元素，开始前的位置或者状态。
4、leave-to（active）：到达这个状态时元素被删除或者隐藏。是过度状态。跟2相同。
无缝轮播图类型：这儿做一张图可见、有圆点，点击可选择图片、左右点击可切换，一共7张图，清理bug。
思路：
首先要明白渲染条件：见vue的渲染条件。
主要思路：轮播图中，它显示的那张图片在浏览器中可以看到有dom元素。隐藏的是没有dom元素的。所以如果显示一张图片，实际上，轮播列表中只有一个元素是存在的，其他的都被删掉了。按照这个思路，就很简单了。想要轮播，设置：enter：右边→enter-to：正常位置，并且过渡完成→leave：正常位置→leave-to：左边，并且过渡完成。
需了解：当它开始渲染新的一张的时候，旧的那一张会与新的一张同时存在，这就有2个元素。当旧的那一张过渡时间完成后，就会被删除。
代码如下：
html：
javascript:
遗留问题：
当使用transitionend事件代替定时器触发图片运动后执行代码时，发现并不理想，有时候运动结束后并不能触发@transitionend事件，原因不明，猜测是过渡时出现了2个img元素，transitionend会分别探测2个元素动画结束，如果有2中style过度，就是应该一次动画触发4次transitionend，但触发次数并不是稳定在4次，非常奇怪。
还有种方式就是不用position，使用transform，但是很遗憾，ie貌似并不支持。
v-enter-to与v-enter-active区别不明。如果enter-to是代替enter-active的，那在transition-group中，enter-to是不比enter-active好用的，官网的例子可以说明。
原文：http://www.cnblogs.com/gsgs/p/6698494.html