关于vue的过渡

Question

在vue2.0入门实战那套课程里，在后面讲那个电商项目的时候那个幻灯片组件，里面的goto方法有用到setTmeout，我试过把setTimeout去掉，过渡效果就没有了，可是实现过渡不是v-if的值改变就可以了吗为什么还要有这个setTimeout，想来想去都想不明白，求大神！！！ <template> <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">   <div class="slide-img">     <a :href="slides[nowIndex].herf">        <transition name="slide-trans">          <img v-if="isShow" :src="slides[nowIndex].src">        </transition>        <transition name="slide-trans-old">          <img v-if="!isShow" :src="slides[nowIndex].src">        </transition>     </a>   </div>   <h2>{{slides[nowIndex].title}}</h2>   <ul class="slide-pages">     <li @click="goto(prevIndex)">&lt;</li>     <li v-for="(item,index) in slides" @click="goto(index)">       <a :class="{on:index===nowIndex}">{{index+1}}</a>            </li>      <li @click="goto(nextIndex)">&gt;</li>   </ul> </div></template><script>export default {  props:{    slides:{    type:Array,    default:[]  },  inv:{    type:Number,    default:1000  }},data(){    return{      nowIndex:0,       isShow:true    }},methods:{  goto(index){    this.isShow = false            setTimeout(() => {      this.isShow = true        this.nowIndex = index      }, 1000)            },  runInv(){    this.invId=setInterval(()=>{      this.goto(this.nextIndex)    },this.inv)  },  clearInv(){    clearInterval(this.invId)  }},mounted(){    this.runInv();},computed:{  prevIndex(){    if(this.nowIndex===0){      return this.slides.length-1    }else{      return this.nowIndex-1    }  },  nextIndex(){    if(this.nowIndex===this.slides.length-1){      return 0    }else{      return this.nowIndex+1    }  }}}</script>

Answer 1

过渡是需要有一个时间段来显示效果的，如果不用setTmeout设置时间，也得有css的transition属性来控制过渡的时间。v-if是值为true就立即显示的。