vue过渡效果-轮播图

为了在vue里做个轮播图，找遍了网页博客，终于找到一个看的懂得文章
具体轮播图的做法参考原文地址：点击这里

vue过渡效果相关：

v-if：条件渲染，将元素删除再渲染出来。

v-show：条件展示，display=none掉，再展示出来；

v-key：vue区分元素的唯一元素标识，必须设置，否则相同的名字的标签只会瞬间改变内容。

transition标签：会检查这个标签内是否用了css过度动画，从而添加/删除css类名，将需要过渡的标签放在里面，按条件v-key或v-if显示到底是哪一个标签进行过度动画。

transition-group标签：可以同时渲染整个列表，比如v-for出来的元素。里面可以设置个如：tag=‘p’改变标签形式，在浏览器中显示为p标签。里面的元素必须设置v-key。

过渡的-CSS-类名：

会有 6 个(CSS)类名在 enter/leave 的过渡中切换

1. v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2. v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

3. v-enter-to： 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter
   被删除），在 transition/animation
   完成之后移除。

4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

5. v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation
   完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

6. v-leave-to：2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave
   被删除），在 transition/animation
   完成之后移除。

Transition Diagram

javascript钩子函数：

过渡组件提供了 JavaScript 钩子函数 这些钩子函数将在恰当的时机被调用。