vue.js的transition動畫中,v-if和v-show在表現(xiàn)上有什么差異?

<template>
  <div class="slider-show" @mouseover="clearInv" @mouseout="runInv">
    <div class="slide-img">
        <transition name="slide-trans">
          <img v-if="isShow" :src="img[nowIndex].src">
        </transition>
        <transition name="slide-trans-old">
          <img v-if="!isShow" :src="img[nowIndex].src">
        </transition>
    </div>
    <div class="mask">
      <h2 class="img-title">{{img[nowIndex].title}}</h2>
      <ul class="control">
        <li @click="goto (prevIndex)">&lt;</li>
        <li v-for="(item,index) in img">
          <a :class="{'on' : index === nowIndex}" @click="goto (index)">
            {{index + 1}}
          </a>
        </li>
        <li @click="goto (nextIndex)">&gt;</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      inv: 2000,
      nowIndex: 0,
      isShow: true,
      img: [
        {
          src: require('../assets/slideShow/pic1.jpg'),
          title: '數(shù)據(jù)統(tǒng)計',
          toKey: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: '數(shù)據(jù)預測',
          toKey: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: '數(shù)據(jù)分析',
          toKey: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: '廣告發(fā)布',
          toKey: 'detail/forecast'
        }
      ]
    }
  },
  computed: {
    prevIndex () {
      if (this.nowIndex === 0) {
        return this.img.length - 1
      } else {
        return this.nowIndex - 1
      }
    },
    nextIndex () {
      if (this.nowIndex === this.img.length - 1) {
        return 0
      } else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    goto (index) {
      this.isShow = false
      setTimeout(() => {
        this.nowIndex = index
        this.isShow = true
      }, 1000)
    },
    runInv () {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    clearInv () {
      clearInterval(this.invId)
    }
  },
  mounted () {
    this.runInv()
  }
}
</script>

<style scoped>
/*動畫樣式*/
.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}
.slider-show {
  width: 900px;
  height: 500px;
  position: relative;
  margin-top: 15px;
  overflow: hidden;
}
.slide-img {
  height: 100%;
}
.slide-img img {
  position: absolute;
  top: 0;
}
.img-title {
  font-size: 14px;
  color: #ddd;
}
.control {
  position: absolute;
  right: 0;
  bottom: 0;
}
.control li {
  float: left;
  cursor: pointer;
  color: #fff;
  margin-right: 22px;
}
.on {
  text-decoration: underline;
}
.mask {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 30px;
  height: 30px;
  background-color: rgba(0,0,0,0.5);
  padding-left: 20px;
  z-index: 999;
}
</style>

如上,一個輪播圖組件,基于輪播圖會頻繁變換及性能的考慮,第5和第8行我本用的是v-show,然后調試發(fā)現(xiàn)進入和退出的動畫的對象都是新圖,頭都想禿掉了,才把v-show換成了v-if,成功...

所以是為什么啊喂~!

我所知的v-if和v-show的區(qū)別是:
1.前者是不滿足條件時不渲染dom樹上無內容;
2.后者是渲染并用css的display:none方式隱藏.

但為什么在表現(xiàn)上回出現(xiàn)這樣的差異呢?
求指教~謝謝~!(/ω＼)