关于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就立即显示的。