vue 中的动画实现

这里实现一个小的图片自动轮播案例

在页面中声明：

    <div id="app">
        <div class="container">
            <transition name="fade" mode="out-in">
                <img :src="images[current]" :key="current" width="700">
            </transition>

    <ul class="btn">
        
        <li v-for="n in images.length">
            <a href="#" 
            :style="{'background-color' : (n-1) == current ? 'hotpink' : '#cccccc'}"
            @mouseover="change(n-1)">{
  {n}}</a>
        </li>
    </ul>
        </div>
    </div>

vue组件实例中：

下面mounted中设置一个setinterval，用来使页面挂在后就自动执行图片的轮播功能。

var Vm = new Vue({
        el: